Any way to expand Div width if nothing exists on the side?

[codaham]

Hi All,

I have a wrapper div for a page which contains two divs within it. The inner divs sit side-by-side by floating them next to each other. One div will contain html content while the other div will contain an image when it exists.

The problem I'm running into is that in some cases there is no image available. In these cases, I am programmatically setting that div style:none; As a result, I would like the other div to automatically expand it's width to fill the whole space.

I've tried setting the width of the html content div to 100%, but that just pushes that div below the other one - not the intended result.

Any help you can provide?

Thanks!

My HTML looks like:

<div id="Establishment">
<div ID="EstablishmentPhotos"></div>
<div id="EstablishmentDetails">
</div>
</div>

CSS is here:

#Establishment {
width: 100%;
position: relative;
padding: 0;
display: block;
}
#EstablishmentDetails {
margin: 0 10px 20px 0;
float: left;
width: 440px;
}
#EstablishmentPhotos {
margin: 0 0 20px 10px;
width: 300px;
float: right;
}
#EstablishmentPhotos img {
width: 300px;
display: block;
margin-bottom: 10px;
}

[swa66]

How about not giving #EstablishmentDetails a float nor a width. Then if you leave out the float right it'll take up that space too.

[codaham]

Oh, that worked. Thanks!

So to recap, it looks like I was basically over-complicating it, huh? By not putting a width or a float, the div will take up any available space?

Floating an item to the right will then cut that space down when necessary?

Thanks again for the help!