Float question for CSS experts

**Zoom123** · May 29, 2007 20:27

Hello,

consider the following code of three floated columns:

HTML 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" xml:lang="en" lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#sidebar, #sidebar2, #sidebar3 {
	float: left;
	width: 185px;
	height: 400px;
	background: green;
}
#sidebar2 {
	height: 300px;
	background: yellow;
}
#sidebar3 {
	background: blue;
}
</style>
</head>
<body>
	<div id="sidebar">
		sidebar1
	</div>
	<div id="sidebar2">
		siderbar2
	</div>
	<div id="sidebar3">
		siderbar3
	</div>
</body>
</html>

What I want is that when the browser resizes to the degree that not all 3 columns can fit side by side, then the 3rd column will collapse under the 1st column, without leaving a gab between them. This should happen regardless of the heights of any of the 3 columns.

As it is now, if the 2nd column is shorter than the 1st (as in the example above) then the 3rd column collapses under the 2nd and not the 1st column. if the 2nd column is longer, then the 3rd column collapses under the 1st, but it leaves a gab between them.

Obviously this is the standard behavior of floats, but I need some sort of hack that will get me the results I want, at least with modern browsers (I6 and better).

Thanks

**young72** · May 29, 2007 21:06

Just some quick thoughts. I'm sure you'll get some more detailed responses soon.

If you really want to use fixed heights then why not just make the second column the same as the first or longer if you need it to be?

As far as the gap, maybe try top or bottom margin to 0. Don't know if that would work but easy to try.

Another option would be to make all columns a % width so they always remain on the same 'line'.

**Zoom123** · May 29, 2007 21:12

Thanks, but the columns would be dynamically filled by a CMS so they can not have fixed heights. I used fixed heights above just to give an example, but as I said I am looking for a solution that will work regardless of heights.

**Paul O'B** · May 30, 2007 06:58

HI,

Just wrap the first two floats in a float.

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" xml:lang="en" lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#sidebar, #sidebar2, #sidebar3 {
    float: left;
    width: 185px;
    height: 400px;
    background: green;
}
#sidebar2 {
    height: 300px;
    background: yellow;
}
#sidebar3 {
    background: blue;
}
#wrap{float:left;}
</style>
</head>
<body>
<div id="wrap">
    <div id="sidebar"> sidebar1 </div>
    <div id="sidebar2"> siderbar2 </div>
</div>
<div id="sidebar3"> siderbar3 </div>
</body>
</html>

If I understand you correctly then that should do what you want

**Zoom123** · May 30, 2007 11:39

Thanks Paul.

Your solution would solve the problem in the first case where the 2nd column is shorter than the 1st. However the second problem remains. If the 2nd column is longer than the 1st then when the 3rd column collapses under the 1st there is a gab between them.

Any solution for that part of the problem?

Thanks.

**rainmakr** · May 30, 2007 14:00

I've only tested this in IE6 & FF, but it should work (assuming you can use an absolutely positioned div in your layout).

HTML 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" xml:lang="en" lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

#sidebar, #sidebar2, #sidebar3 {
	float: left;
	width: 185px;
	height: 400px;
	background: green;
}
#sidebar2 {
	height: 600px;
	background: yellow;
}
#sidebar3 {
	background: blue;
}

/* My CSS additions */
body {margin:0; padding:0;}
#wrapper {width:370px; float:left; }
#sidebar2 {
	position:absolute;
	left:185px;
	top:0;
}

</style>
</head>
<body>
<div id="wrapper"> <!-- add the wrapper around sidebar1 and sidebar2 -->
	<div id="sidebar">
		sidebar1
	</div>
	<div id="sidebar2">
		siderbar2
	</div>
</div> <!-- end wrapper -->

	<div id="sidebar3">
		siderbar3
	</div>

</body>
</html>

**Zoom123** · May 30, 2007 14:28

Thanks rainmakr. Your solution meets the requirements I gave.

However I would like to maintain the way the 3 columns behaved when the window is reduced even further, so in that case all 3 columns to be stacked in a single column.

Also the columns should be able to "push down" what comes after them which can be a problem when they are absolutely positioned.

**Paul O'B** · May 30, 2007 14:56

Other than the above 2 demos I don't think you will be able to achieve exactly what you want as there seems to be no way for the float to wrap and then travel upwards. You can use a negative top margin of course but then it wouldn't be automatic.

**Kravvitz** · May 30, 2007 15:22

I agree with Paul. There doesn't seem to be a way to meet all the requirements automatically with CSS2.x alone.

You could set it up to place a class on body to switch between the layout variants.

**Zoom123** · May 30, 2007 15:39

Its OK. Making sure that the first column is at least as high as the second is a small compromise.

Thank you all for your help

User Tag List

Thread: Float question for CSS experts

Thread Tools

Display

Float question for CSS experts

Will this meet your requirements?

Bookmarks

Bookmarks

Posting Permissions