Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Floating boxes while maintaining document flow

    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!!!

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by BenDesign View Post
    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

  • #3
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!!

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.

  • #5
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yeah ... I read it just now and figured it out. Sorry I wasted your time!

    Thanks again!!!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •