Floated, fixed-width sidebar with fluid-width *previous* sibling?

HTML & CSS
1

In the markup below, without changing the order of the elements, and without adding additional elements, I would like to fix the width of the sidebar to 300 pixels and float it to the right of Content so that Content and #sidebar have the same top x position (they are aligned beside one another).

For Content, I don’t want to specify a width, but rather, I want it to auto expand to fill the available width left over from #sidebar.

In some cases, #sidebar will not be present in the markup, so the CSS will allow that condition and content will just expand/contract nicely to fill the space.

The tricky part is that since #sidebar follows Content in markup, unless Content is given a fixed width less than or equal to the parent container’s remaining available width, #sidebar falls below it.

Any ideas?

<div id="main">
	<div id="top-widget">This div should span the full width of the parent container</div> 
	<div id="content">This div should float to the left of its sibling "#sidebar" and should take up as much horizonal space as left over after #sidebar's fixed width</div>
	<div id="sidebar">This div should float to the right of content and be 300 pixels wide.</div>
	<div class="clearFloats">This div is empty and just clears any floats before the footer section begins</div>
</div>


#main {width:967px;}
#top-widget {clear:both;}
#sidebar {float:right; width:300px;}
#content {???}
2

i would probably place divs in this order

<div id=“main”>
<div id=“top-widget”>This div should span the full width of the parent container</div>
<div id=“sidebar”>This div should float to the right of content and be 300 pixels wide.</div>
<div id=“content”>This div should float to the left of its sibling “#sidebar” and should take up as much horizonal space as left over after #sidebar’s fixed width</div>
<div class=“clearFloats”>This div is empty and just clears any floats before the footer section begins</div>
</div>

When the sidebar is present you could easily have the content div with css
Content {margin-right:300px;}

However i am not sure if you could have a way of knowing from css if sidebar is present or not. you could use some javascript though to set different css for content div.

3

Thanks webcosmo, I appreciate your suggestions, but…

Its important in this example that the content precedes the sidebar for the intrinsic SEO value of the content over the sidebar.

So I’m looking to see if there’s a pure css solution that doesn’t involve javascript or markup change.

I figure that if its possible, I’m in the right place to find out, and how :slight_smile:

4

Hello,

You could try using a display:table-cell. Something like that:

#main {width:967px;}
#content {display:table-cell;min-width:667px;width:967px;}
#sidebar {display:table-cell;min-width:300px;}

Of course this won’t work in IE7 and below. You could use a css expression for those old browsers:

<!--[if lt IE 8]>
		<style type="text/css">

		#content {
			float:left;
                        width:667px;
			width:expression(document.getElementById('sidebar') ? "667px" : "967px");
		}
		
		#sidebar {float:right;width:300px;}

		</style>
<![endif]-->
5

The display table-cell method that Candygirl suggests above should do exactly what you want for modern browsers (IE8 and upwards).

If you need support for IE6/7 then you either have to use the expressions shown above or change the html around a bit so that sidebar comes first in source if you need Content to automatic fill remaining space whether sidebar is present or not.