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
    •