Forums

copperSmith

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:


<body>
	 <div id=\"page\">
		  <div id=\"main\">
			   <div id=\"logoWrap\">

					<div id=\"logo\">
						 <img src=\"assets/imgs/logoMain_v2.png\" height=\"201\" width=\"341\">
					</div>
			   </div>
		  </div>
		  <div id=\"footer\">
			   <div id=\"footerWrap\">
			   <div id=\"aboutUs\">
					<p></p>

			   </div>
			   <div id=\"contactUs\">
					<form class=\"contact-area\"></form>
			   </div>
			   </div>
		  </div>	 
	 </div>
</body>

AshtonSanders

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.

copperSmith

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!

AshtonSanders

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 728x1028 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.

treehouse : what would you like to learn today?

Forums

[Solved] Maintain Height Of Divs When Collapsing Window