floated div + variable width div side to side problem.

[s_o_c]

Hello,

I encountered a seemingly easy problem that I find impossible to solve and even after searching the web for some time, I still don't know how to cope with it.

I need to have a block with some kind of background (box 1), which resides inside another block (box 2 - with another background). The problem is that I also want another box (box 3) to appear _sometimes_ to the right of box 1. And I can't find a way to display these two boxes (1 and 3) side to side _and_ simultaneously, have box 1 scale to full width in the absence of box 3...

Btw, MSIE 6/7 does provide the behaviour I'm looking for, but I'd like it to work in Firefox, Opera and other browsers...

to illustrate:

<url removed>

examples 1 and 5, 2 and 6, 3 and 7, 4 and 8 correspond to each other and differ only by the missing side-box... what I look for is something that would look like 2 or 4 with the box present and 5 or 7 with the box missing...

(once again - IE 6 and 7 do provide the desired outcome, but FF and Opera do not)

thanks in advance for any hints...

[edited by: encyclo at 5:23 pm (utc) on Mar. 30, 2007]
[edit reason] no links to personal sites please, see forum charter [/edit]

[SuzyUK]

Hi s_o_c and Welcome to WebmasterWorld!

I saw some of your code before the link was removed and hope you don't mind if I post a small sample of it to help try and illustrate. I'll just post 3 and 7 which are identical really apart from hiding the box in the second one.

HTML:
<div class="outer">
<div class="box">whatever</div>
<div class="inner">3. no float, no-width...<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<div style="clear: both;"></div>
</div>
<br />
<div class="outer">
<div class="box dn">whatever</div>
<div class="inner">7. no float, no-width...<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<div style="clear: both;"></div>
</div>

CSS:
.outer {background: red; border: 5px solid black; padding: 5px; width: 500px;}
.inner {background: orange; min-height: 150px; border: 5px solid black;}
.box {
float: right;
width: 100px;
height: 100px;
background: yellow;
border: 5px solid black;
margin: 0 0 0 5px;
}

.dn {display: none;}

and the IE View of these is what you would like to achieve x-browser?

this I think can be solved with margins, but it depends on where in your code would be best to put an extra class, i.e. how will the page know when the "display: none" variable is called, is this being done via php if/else statements?

Suzy