...

View Full Version : simple css problem



Wee Bubba
01-23-2007, 10:53 PM
i am trying to lay my page out so that i have a fixed width div on the left. and the right hand div stretches 100%. my code at the moment stretches the page too far and horizontal scrollbars appear. what am i doing wrong please.

my html:

<div>
<div id="body_top1">
<div id="body_top2"></div>
</div>
</div>

my css:

#body_top1{
height:109px;
background-image:url(../Images/Admin/top1.gif);
background-repeat:no-repeat;}
#body_top2{
left:550px;
height:109px;
width:100%;
position:relative;
background-image:url(../Images/Admin/top2.gif);
background-repeat:repeat-x;}

coothead
01-23-2007, 11:38 PM
Hi there Wee Bubba,

does this help...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#body_top1{
float:left;
height:109px;
width:550px;
background-image:url(../Images/Admin/top1.gif);
background-repeat:no-repeat;
}
#body_top2{
margin-left:550px;
height:109px;
background-image:url(../Images/Admin/top2.gif);
background-repeat:repeat-x;
}
</style>

</head>
<body>

<div>

<div id="body_top1">this div is 550px wide</div>
<div id="body_top2">this div takes up the rest of the space</div>

</div>

</body>
</html>

coothead

Wee Bubba
01-23-2007, 11:55 PM
thanks bro that worked a treat.

i did try float before but i was using float:right and clear:both.

nice one.

coothead
01-24-2007, 12:07 AM
No problem, you're welcome. ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum