Skip to main content

Forums

This topic contains 5 replies, has 0 voices, and was last updated by  brianatlarge 8 years, 10 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #30342

    brianatlarge
    Member

    I’ve got several floated boxes with different heights. I’d like for everything to be pushed up together, but for some reason, it’s putting the next floated box at the same level as the bottom of the longest box.

    Here’s a picture of that I’m talking about: http://twitpic.com/2rh0lp/full

    Here’s the CSS for those boxes:

    .jobFieldset {width:30%; float:left; margin-right:10px; margin-bottom:10px;}

    Anyone have this happen before?

    #79123

    Bob
    Member

    Add this after the last box in the row:

    with CSS code:

    .class	{
    clear: both;
    }

    That should clear the floats, otherwise the last box will indeed jump down one line or so.. I don’t really know why, but it helps.

    Edit: Read through this, it might have some important info about the floats and clearing floats, probably better the way I explained it. Actually, after quickly looking at that article, I’m not sure my solution is correct :P

    #79116

    brianatlarge
    Member

    So I put in the clear div after the third box, and it helped a little, but it’s still aligning to the longest box.

    http://twitpic.com/2riexa/full

    #79105

    TheDoc
    Moderator

    I’ve got several floated boxes with different heights. I’d like for everything to be pushed up together, but for some reason, it’s putting the next floated box at the same level as the bottom of the longest box.

    Unfortunately, that’s not how floats work. The latest screenshot that you’ve provided is exactly what a user should expect with floated boxes that have “clears” properly applied to them. If you want lots of different boxes of different heights to all be together, you’ll have to go beyond CSS.

    #79107

    kevsyers
    Participant

    The flow of the boxes are working like they should. Are these boxes automatically generated? If not, why not have 3 wrapper divs that contain 2 boxes (stacked on top of each other). then float the wrapper divs.

    Hope my suggestion makes sense

    #79108

    brianatlarge
    Member

    Wrapping the boxes in floated containers was my plan b, just wasn’t sure if there was a trick I was missing.

    Thanks.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star