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

Home Forums CSS [Solved] Maintain Height Of Divs When Collapsing Window

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #27467

    Okay. I’m not a noob, but I’m not terribly efficient. I know I can do damn near anything I want, but often have to poke, prod and google my way to certain resolutions. For this tempSite I didn’t have to do too much of that… except for when it came to ensuring divs weren’t collapsing upon each other when the browser window was resizing.

    I fixed the #footer divs, and so they don’t collapse onto each other when the browser is horizontally resized. I have also worked it out so that the #logoWrap and #logo divs, are fully visible on a fully expanded 1024 resolution.

    The Problem Here: is to ensure that when the browser is vertically resized, that it doesn’t collapse the #logoWrap and #logo divs all the way, and just show the #footer div, but that it’s "fluid" up to a point, and at that point it stops resizing, so the logo and the full #footer div is always visible. A scrollbar would then be required to view the content once the browser is super thin vertically… but I just can’t seem to pull it off.

    Here is my current project: (just switched dns points and actual domain may not be active for all isps yet). The issue isn’t bad enough to hault a launch, but is annoying me to no end.

    Here is the FULL css (sorry, just not sure where the problem lies, but there’s only 9 declarations of note):

    Here is the source in question:



    It doesn’t work in IE6, but you can give your #page or #main a "min-height" to make sure it doesn’t collapse too much.


    Boom, fixed it.

    I applied a specific height to the #page div (to 835px from 100%), and bumped up the % on the #logoWrap div (to 65% from… some lesser value – to bring the logo down from floating too high in the #main div.

    Thanks for the brain-jog to get this in shape Ashton.

    viva la css-tricks!


    Hey man. No problem.

    I don’t know what screen size you are looking at your page in, but have you tried looking at it on a 728×1028 screen? The footer is practically gone, and the logo has a lot of empty space above it. I just wanted to make sure you are looking at your site in the common screen sizes.

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