The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

3 column left float, but how to achive 1 under 2?

hi all

created a 3 column layout last week all with float left, but ive come to the point were i need 1 column to strecth underneth 2 columns, i applyed the left float again and made the box bigger but it just does exatclly what is says (float left) how can i get it to sit just underneth with out pushing to the left?

Have them all in a container say 750pixels wide, and have column 1 at 250px, column 2 at 500pixels and column 3 at 750pixels will be forced to display underneath 1 and 2. 1 and 2 must equal the container.

Its hard to say as I'm not quite sure what you want and there could be so many combinations but you probably need to sub divide the layout by separating the middle and right columns into a parent container.

e.g.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#outer{
width:778px;
margin:auto;
background:#ffffcc;
overflow:hidden;
}
#left{
float:left;
width:154px;
background:blue;
}
.rblock{
width:624px;
float:left;
}
#middle{
float:left;
width:400px;
margin: 0px 13px;
display:inline;/* ie double margin fix*/
background:green
}
#right{
float:left;
width:198px;
background:yellow;
}
.mwide{
float:left;
width:624px;
background:red;
}
p{margin:0 0 1em 0}
</style>
</head>
<body>
<div id="outer">
<div id="left">
<p>This is the left content: This is the left content: This is the left content: This is the left content: This is the left content: </p>
</div>
<div class="rblock">
<div id="middle">
<p>This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : </p>
</div>
<div id="right">
<p>This is the right content : This is the right content : This is the right content : This is the right content : This is the right content : This is the right content : This is the right content : This is the right content : This is the right content : This is the right content : This is the right content :</p>
</div>
<div class="mwide"><p>This will span 2 columns : This will span 2 columns : This will span 2 columns : This will span 2 columns : This will span 2 columns : This will span 2 columns : This will span 2 columns : This will span 2 columns : </p></div>
</div>
</div>
</body>
</html>

There's probably a load of different ways to do this depending on what you are trying to achieve.