...

View Full Version : Floating boxes while maintaining document flow



BenDesign
05-08-2007, 12:49 AM
I am creating a page that has 3 boxes that display in-line across the page. I am using floats to position them across the page, but I want the next item in the flow not to start until below the longest of those three boxes.

I tried creating a relatively-positioned wrapping container around the 3 boxes to place the floats back inside the document flow, but that isn't working. There's a blue border around that box so you can see it.

http://fidea.org/newSite/

It's sorta hard to explain, but you'll see what I mean when you look at the page. Any thoughts on how to resolve this issue is greatly appreciated!!!!

THANK YOU!!!

rmedek
05-08-2007, 01:03 AM
I am using floats to position them across the page, but I want the next item in the flow not to start until below the longest of those three boxes.

Did you try "clear: both"?

http://www.google.com/search?q=float+clearing

BenDesign
05-08-2007, 01:32 AM
Hmmm ... Tried adding it to the wrapper box, to no avail. Applying clear:both to box1 seems to have no effect at all, and when you apply it to box2 and/or box3, it forces the clears them as you would expect. Is that what you thought would happen?

Thank you so much for your help!!

rmedek
05-08-2007, 01:55 AM
No, I thought you would read some of the articles from the link, and then apply clear: both to the next item in flow that you want to start below the three floated boxes.

The P.I.E. article clearing floats without structural markup is my preferred method to have the element contain the floats.

BenDesign
05-08-2007, 02:01 AM
Yeah ... I read it just now and figured it out. Sorry I wasted your time!

Thanks again!!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum