Hi there, guys!

So, I have this page where I have a "line" with 4 "blocks". 2 main DIVs, and inside each of them, two FIELDSETs (not a requirement - I already tried DIVs with an H4s in place of LEGENDs - same problem).

When the user decreases the browser width, I would like the DIVs to go under each other ("next line"), but not the FIELDSETs, since they contain related data. Although it would be desirable if the inner FIELDSETs also wrapped to the next line if space gets even tighter, it's not mandatory and I don't mind about it.

BUT... I'm stuck now. The FIELDSETs to the right, inside each DIV, wrap to the next line when the horizontal space starts decreasing. The DIVs only wrap when horizontal space is really getting very small (and only on IE6 - Fx3 keeps them together).

IE6 is standard here. Cross-browser is cool (and right now it seems okay), but it must show appropriately on IE6. And yes, they should be resizable, or I wouldn't mind about floating them. :-)

Please give me some light, guys. My knowledge about floating goes as far as this HTML, I've seen some CSS around talking about "overflow: auto", positioning, but I only got more lost. I didn't see something similar yet, and I hope the effect is possible.

I've sent you the sample page. Enlarge it as much as you can, and you'll see them all on the same line. Then start decreasing size horizontally: what I want is that divCD goes to the next line (under divAB). Right now, only the contents of divAB and divCD are doing that, exactly the effect I don't want. :-(

As this is the first time I drop by, please excuse me for any errors I might have committed, guys - English is not my native language. :-(

Thank you very much for any tries! Thanks!

2 answers

orta 244

It looks like what you want to be doing is wrapping the two fieldsets in a div with a fixed width inside the divAB/divCD this means the internal fixed width will never be small enough for the fieldset to jump down.

IE 6 doesn't support the CS property min-width, otherwise that would have been the easiest option.

Answered almost 8 years ago by orta

Thanks for answering, orta.

So, basically, that means I wouldn't be able to have the DIVs flexible like they are right now, right? :-(

Edit: well, unfortunately, none of the CSS-only trials would fix that. I used IE6 CSS expressions. As much as I don't like that, it works like a charm for emulating min-width.

This is how divAB and divCD look now:

#divAB { float: left; width:expression(document.body.clientWidth < 625 ? "250px" : "40%" ); }
#divCD { float: left; width:expression(document.body.clientWidth < 625 ? "375px" : "59%" ); }

Thanks for trying, orta, and also for the hint about min-width.

Answered almost 8 years ago by Charles Roberto Canato