The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS I need margin collapse for floats!

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #35169

    I’m trying to make my site as responsive to window sizes as possible and wondering how to best structure some items in my header block. I have an title block with some text in it positioned in the upper left-ish of the header area, and a menu positioned in the lower right-ish of the header area. They are set up as floats, because what I’d like is for the menu div to pop under the text block when the page is viewed on a smaller screen (or resized smaller). On a “normal” desktop size screen the menu would be displayed to the right of the title text. The problem is that since they are floats, the margins don’t collapse if the menu div is under the text div and the two block have a huge margin between them. I just can’t figure out a good trick to get these to collapse only if the menu div is “under” the h1 block due to the window size. I guess I really need margin collapse for floats. Check out my jsFiddle at size the output window so that the menu pops over to the right of the title – looks fine, but not when it is under the text. I put a box around the text to help visualize the block.

    Absolute positioning I don’t think will work out well since I don’t want the text on top of the menu, ideally the header div doesn’t need to be set with a fixed height so it will just expand to fit the contents. I’m avoiding any and all fixed dimensions to keep things as fluid as possible.

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.