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 7 of 7
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Extra vertical space when floating multiple boxes

    I am trying to float about 10 boxes left in a way that will make them line up into two columns. I have set the main wrapper box to an appropriate width, and set the width and margin of the class which all of the boxes will be, so that there is enough room for two boxes to line up next to each other, before the next one is bumped down. The problem is, the boxes are all different heights, so if, for instance, the first box is 200px high, and the second is only 100px high, the third box will be bumped down below the second box, but still "stuck" to the right of the first box. This is still ok, but if the third box is 150px high, it sticks out lower than the first box. So then the next box, rather than being directly below the first box, is below it, but with enough vertical space so that it is below the third box... and I don't want that vertical space.

    Here's a picture of what I mean:


    So you can see there is vertical space between box 1 and box 4, because box 4 apparently has to be below box 3.

    Does anybody have any idea how I could get rid of that vertical space? I can't split the "wrapper" div into two columns and just put half the boxes in each one, because the boxes are created dynamically by a PHP loop from MySQL data.
    Last edited by shanstafari; 11-02-2006 at 04:59 PM.

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why not add another two div's inside the wrapper div, floated to each side to create the two columns? Then add div's inside them as neccesary (as they are block elements they will just fall under eachother anyway).

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, like I said, the boxes are created by a PHP loop pulling data from MySQL, so I don't really have as much detailed control over which boxes go where... they just all plop down wherever my PHP code is.

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh I see; no way to alter the PHP then? Would be a lot easier if you had full control over the source.

  • #5
    New Coder
    Join Date
    May 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, I can alter the PHP. I was kind of thinking I could make a code that names every other one a different class, and then I could float one class left and the other class right, but I haven't tried that yet. Any ideas?

  • #6
    New Coder
    Join Date
    May 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, my idea worked. Case closed! Thanks for the help.

  • #7
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah glad you sorted it!


  •  

    Posting Permissions

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