Grow your CSS skills. Land your dream job.

[Solved] Maintain Height Of Divs When Collapsing Window

  • # January 8, 2010 at 2:49 pm

    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: http://66.147.244.185/~carryth1/ (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):
    http://66.147.244.185/~carryth1/assets/style.css

    Here is the source in question:

    Code:

    # January 9, 2010 at 12:47 am

    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.

    # January 9, 2010 at 10:59 pm

    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!

    # January 10, 2010 at 1:44 am

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".