- This topic is empty.
January 8, 2010 at 2:49 pm #27467copperSmithMember
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://220.127.116.11/~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):
Here is the source in question:Code:January 9, 2010 at 12:47 am #69152AshtonSandersParticipant
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 #69194copperSmithMember
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 #69195AshtonSandersParticipant
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.
- The forum ‘CSS’ is closed to new topics and replies.