My image will keep displaying on a new Line Problem

**nihilater** · 09-27-2009, 07:32 AM

I have 2 "About" on my footer below but the second one keeps on displaying on a new line like:

this is the problem page:

this is the correct one, i want it to look like this:

i have this html code:

HTML Code:

<div id="abouts">


	<span>
			<div id="this_foot">
			
				<h3>About</h3>
				<p>asd</p>
			
			</div>
			
			<div id="this_foot2">
			
				<h3>About</h3>
				<p>asd</p>
			
			</div>
	
	</span>


	
</div>

and a CSS line like this:

HTML Code:

#abouts
{

position:relative;
width:890px;
height:209px;
padding-top:20px;
padding-bottom:10px;
margin-left:100px;
}

#abouts span
{display:inline;
}

#this_foot
{
	position:relative;
	background:url(images/footerbg.jpg);
	background-position:left;
	background-repeat:no-repeat;
	width:345px;
	height:168px;
	margin-right:10px;

}

#this_foot h3
{
font-family:Arial, Helvetica, sans-serif;
text-align:right;
font-size:14px;
font-weight:900;
color:#72ff00;
padding-top:20px;
padding-right:10px;
margin-right:10px;
}

#this_foot span
{
display:inline;
}

#this_foot p
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color: #FFFFFF;
	margin-left:20px;
	margin-right:20px;
	
	
}

#this_foot a
{
color: #0af3f6;
}

#this_foot a:hover, a:active
{
color: #72ff00;
}

I can do it by making the second about "absolute" but it is much tedious and it is not compatible with IE where it sticks half of its head above. I just want to do it with two divs and align it on the same line.

thanks, please help.

**davelf** · 09-27-2009, 11:02 AM

is there any problem if you change your id on the div tag into class, if you may change it, you can use float, this is the example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.this_foot{
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#2A1F00;
	float:left;
}
.this_foot2{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#808080;
	float:left;
}
</style>
</head>

<body>

<span>
     <div class="this_foot">
         about
     </div>
     
    <div class="this_foot2">
    about
    </div>
</span>
</body>
</html>

good luck.

**nihilater** · 09-27-2009, 11:12 AM

wow, that works. Haha. thanks so much man! Now I wanna know why did that happen. you have any idea?

**nihilater** · 09-27-2009, 11:17 AM

hey, but the margin and padding won't work. the two div are kissing each other. I want it to have like 10px space in between of them. What do you think is wrong with that?

Code:

.this_foot2
{
	position:relative;
	background:url(images/footerbg.jpg);
	background-position:left;
	background-repeat:no-repeat;
	width:345px;
	height:168px;
	margin-right:10px;
	padding-left:20px;
	float:left;


}

Code:

			<div class="this_foot2">
			
				<h3>About</h3>
				<p>asd</p>
			</div>

**bluewalrus** · 09-27-2009, 02:51 PM

margin not padding.

Code:

.this_foot2
{
background:url(images/footerbg.jpg) left no-repeat;
	width:345px;
	height:168px;
	margin-right:10px;
	margin-left:20px;
	float:left;
}

**davelf** · 09-28-2009, 07:27 AM

like bluewalrus said use the margin

to seperate my example you can add this:

Code:

.this_foot2{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#808080;
	float:left;
	margin-left:50px;
}

for more information about the margin u can see it here:

http://www.w3schools.com/CSS/css_margin.asp

good luck..

Thread: My image will keep displaying on a new Line Problem

Thread Tools

Search Thread

My image will keep displaying on a new Line Problem

Bookmarks

Bookmarks

Posting Permissions