SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Threaded View

  1. #1
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    0 Post(s)
    0 Thread(s)

    challenge: make irregular-height floats behave like equal height floats

    ...without changing the height of the elelements

    My goal is to make attached screenshot number 1 look the same as attached screenshot number 2.

    The "broken" version just has a set of floated elements with fixed widths. The problem is the floated elements jump up when an element in the row above it becomes higher than the elements after it in its own (visual) row.

    In the fixed version I added clear:left to the first element in each visual row. There are no tags to wrap the rows.

    I've been unable to come up with a way for the floats to stop popping out of the row. I guess it's just the way that floats are designed but that doesn't prevent me from trying to hack it

    any ideas?

    I attached a zip file with the html/css I used to make the screenshot. If you open the page and it doesn't look broken, make your browser window narrower and it will break.
    Attached Images Attached Images
    Attached Files Attached Files


Posting Permissions

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