Expand Column 1 to max width when column 2 is absent - css

Question

Here is my markup:
<div class="wrapper">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi ipsum, gravida quis eleifend at, vestibulum at nibh. Nunc faucibus pellentesque nunc, vitae ultricies nibh interdum eu. Proin a est sed eros suscipit pretium ac sit amet tortor.</p>
<p>Vivamus feugiat, neque non tincidunt iaculis, dolor ipsum convallis libero, condimentum malesuada leo nulla a turpis. Praesent sed metus ipsum. Cras semper condimentum mauris. Nulla eleifend blandit facilisis. Phasellus gravida tempus eros, molestie cursus nisi imperdiet non. Donec dapibus.</p>
</div>
<div class="adverts"></div>
<div class="clear"></div>
</div>
Fiddle here -- feel free to modify and test
I want a CSS solution that makes the content width equal to max available width or max available width - 120px depending on whether adverts div is present or not. The div may or may not be present depending on whether the page is supposed to show ads or not. The solution must work in older versions of IE.

Answer 1

#Salman, if you rearrange the order of the two divs then you can do this without any widths, you just float:right the "adverts" div and don't float the content
as per one of the other answers you cannot right float a div after an unfloated one in IE to achieve this same effect without a width/margin being involved
added: Here's Your example fiddle updated : http://jsfiddle.net/clairesuzy/EqYnw/8/
Example Fiddle
The jQuery just toggles the actual ad-element to show that if there no content in the adverts div it will collapse the overflow usage is explained in the code.
I'm not sure if your "not present" div is the actual "adverts" div or the elements inside it, but this should work for both as the content will default to 100% of whatever is left over
Code for info:
CSS:
html, body {margin: 0; padding: 0;}
.wrapper {
overflow: hidden;/* Makes wrapper contain its floated children */
zoom: 1; /* Makes wrapper contain its floated children in IE6 and below */
border: 1px solid #666;
background: #ddd;
}
.content {
border: 1px solid #000;
background: #fff;
overflow: hidden; /* to not wrap under adverts if content is longer - optional if you want the wrap */
zoom: 1; /* equivalent of overflow for IE6 and below */
}
.adverts {
float: right;
border: 1px solid #00c;
}
/* put any widths on the actual advert element */
.ad-element {width: 200px; height: 30px; background: #0f0;}
HTML:
<div class="wrapper">
<div class="adverts"><div class="ad-element">.</div></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi ipsum, gravida quis eleifend at, vestibulum at nibh. Nunc faucibus pellentesque nunc, vitae ultricies nibh interdum eu. Proin a est sed eros suscipit pretium ac sit amet tortor.</p>
<p>Vivamus feugiat, neque non tincidunt iaculis, dolor ipsum convallis libero, condimentum malesuada leo nulla a turpis. Praesent sed metus ipsum. Cras semper condimentum mauris. Nulla eleifend blandit facilisis. Phasellus gravida tempus eros, molestie cursus nisi imperdiet non. Donec dapibus.</p>
<button>Show hide ads div</button>
</div>
</div>

Answer 2

I assume column 1 is the content of div.content, there's at leas two ways you can get this to use max available space when the second column (div.adverts) is empty.
You can let the wrapper and content be non-floating, and let the adverts one float to the right. The non-floated divs should use all available space, and the right float should cause the text to wrap around it. As long as the adverts div (when not empty) is taller than the content it will appear as two columns. (I assume the clear div is a float clearing hack or something?)
You could also use a table (not politically correct, but a lot easier to make it work in older browsers). Let the table be 100% widht, and don't specify any widht for the table cells. An empty cell should use zero space. (This will give a two column layout even if the lenght is different without any complicated css)
In any case: To avoid bugs where defining styles for an empty element causes it to be visible, style the sub elements instead, if they're not present the css will not apply anyway, like this:
/*gives all direct subchild divs 300px widht*/
.adverts>div{ width: 300px; }

Answer 3

You could use the general sibling selector + for the case the .advert div is not in the HTML at all.
Let the .advert float right, and have it before your .content div in the HTML (for CSS selector)
<div class="wrapper">
<div class="adverts"></div>
<div class="content"></div>
</div>
.content
{
float: left;
width: auto;
background-color: cyan;
}
.adverts
{
float: right;
width: 120px;
height: 600px;
background-color: lime;
}
Use the sibling selector to define the smaller width if the .adverts div exists.
.adverts + .content {
width: 130px;
}
This will not work dynamically with show() and hide(). If you require that dynamically, you have to remove the .advert from the DOM.
Here is a fiddle with a demonstration using detach() instead of hide() (worked on a VM in IE6).