100% Min Height issue

Not sure what I did but I messed something up with my 100% height. It was working great but now I cannot seem to get my <container> to have to have a 100% height. Just quits after the content. My <wrapper> that contains it is how I want it. Cannot seem to find my problem. Must be blind. If you could help it would sure be appreciated. Thanks!

www.countrysidecabinetshop.net/about.html

www.countrysidecabinetshop.net/gallery.html

 

To fix this, just open countryside.css and delete the 24th line where it says min-height:100%;
It will patch up your issue with the wrapper, but believe me, that is not the only issue your website has.
From malformed meta, overstuffed keywords, to useless <nav> (sorry html5), <p> that do not even represent paragraphs on your website, etc.

 

My wrapper does not have an issue. That is just were it is supposed to be. If I delete the line you suggest then my container AND my wrapper then have the same problem of not extending to the bottom of the page.

 

Oh, it looks like I didn't get you the first time.

There are two reasons why your question doesn't make sense:
-There is not enough content to push it all the way to the bottom, so how and why would you expect to go to the bottom? You can set the min-height in pixels if you want it to, but not really a good idea imho.

-Different platforms have different resolutions. Try using a handheld device to access your website. It will expand all the way. This is perfectly normal, since the screen dimensions are different. Again, add more content or give your div.content (a class? really?) a min height in pixels. No other (good) way to go.

 

The reason that I expect it to is because I have it set @ min-height: 100;

I just want the page to auto expand to fill the viewport all the way to the bottom with the footer tied to the very bottom.

 

I'm assuming the page in question is gallery.html, but if i'm wrong then feel free to enlighten me.

The reason your container isn't expanding to the bottom of the screen is because to the container (and the wrapper, too), 100% height is the height of the content. You could fiddle around with CSS all day long but as it looks like it will be changing soon (pictures to be added?) I will go ahead and suggest you simply place a few <br /> tags after the 'Pictures coming soon' line. Really, you shouldn't be spending this much time on something so trivial.

His meta tags are perfectly fine. Nav isn't useless at all, it's a replacement for Unordered Lists being used out of context (most menu's tend to follow an order) and also menu links having the redundant List Item tag around them. <nav><a href="#">Link</a></nav> is a lot more semantic and logical than <ul><li><a href="#">Link</a></li></ul>. Not to mention it's shorter. It comes down to how much control you want over menu item's in the end. Do you need an extra tag around the menu items to style them correctly? If not, use <nav>.
And sorry if it seems like I am being pedantic, but there are a number of things with this post too...

If it doesn't make sense to you, should you be attempting to give advice? He is not expecting the container to do anything, he is attempting to manipulate it to do something he wants it to do. There are many alternatives, 100% screen height hasn't been an issue for years, for example natural content placement, css, html (as I listed above), sticky footers, js fixes, etc etc.

 

NO, that's NOT what NAV is for -- NAV is to indicate the section is not content and can be skipped by accessibility UA's -- READ about NAV in the specification -- and that's WHY it's redundant to heading navigation if you use headings properly, which is to say NOT how that bloated ignorant half-assed crap known as HTML 5 says to.(assuming you're in a UA that actually cares about accessibility and ever bothered finishing it's HTML 2 implementations, so Opera and Blazer... and JAWS adds the functionality)

Except at that point what are you gonna do, wrap NAV around every blasted lone anchor on a page? If there's multiple anchors, how are you semantically saying it's not one giant run-on sentence since A doesn't actually change the meaning of nor provide structure to the text it's around?

Hence the reason to pimp-slap all the re-re's who do crap like this:

<nav><a href="home">Home</a> <a href="links">Links</a></nav>

If you are choosing semantic tags based on what you are doing for STYLE, you are choosing the wrong tags for ALL the wrong reasons.

Oh, and as to the meta? They are broken from poor formatting, and the keywords is overstuffed nonsense since keywords should be 7 or 8 words that exist inside BODY that one want's upranked, totalling less than 128 bytes (some places like SEOWorkers tells you to use even less). Because it's an endless mess of some twenty odd words that do not exist, it will be ignored. Of course, NOBODY using it properly is why EVERYBODY seems to think it no longer has any impact.

-------------- on to the OP's question -------------

For the most part I suspect any extra height is coming from a lack of a reset since some browsers start out with padding and margin on BODY or HTML, the presence of border on your min-height element adding to the min-height, the height:100% on a element inside the min-heighted element should either end up too tall or too short causing layout issues... as does the border on the footer which also adds to the height, meaning you'd need to ADD

Of course that you set border styles without setting it's widths can have all sorts of bizarre behaviors cross browsers... and generally speaking you want min-height layout, you cannot do top or bottom borders or paddings on ANYTHING that has height/min-height set on it.

There are the markup issues too -- some stupid header DIV and IMG tag doing H1's job (with an image replacement technique like gilder-levin) so you have a logical document structure and images off graceful degredation, you've got P+B doing H2's job (Not that I'd repeat that text again for no reason!), P and a non-breaking space doing padding's job, an extra DIV with inlined style for christmas only knows what, P and STRONG around text in the footer that is neither a paragraph nor should it be recieving emphasis, etc, etc...

So the first order of business is to clean up the markup, excuse me as I swing an axe at the HTML 5 asshattery:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="viewport"
	content="width=device-width; initial-scale=1.0"
/>

<meta
	name="description"
	content="Countryside Cabinet Shop has been in business for more than 20 years, with a history of craftsmanship going back generations."
/>

<meta
	name="keywords"
	content="Cabinet,Craftsman,Kitchens,Bath,Offices,Furniture,Installation"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	About Our Cabinetry Business
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Countryside Cabinet Shop
		<span><!-- image replacement --></span>
	</h1>
	
	<ul id="mainMenu">
		<li><a href="index.html">Home</a></li>
		<li><a href="services.html">Services</a></li>
		<li>
			<a href="gallery.html">Gallery</a>
			<ul>
				<li><a href="kitchengallery.html">Kitchens</a></li>
				<li><a href="bathgallery.html">Bath</a></li>
				<li><a href="officegallery.html">Offices</a></li>
				<li><a href="entertainmentgallery.html">Entertainment</a></li>
				<li><a href="storagegallery.html">Storage</a></li>
				<li><a href="conveniencegallery.html">Convenience</a></li>
				<li><a href="miscgallery.html"html>Misc</a></li>
				<li><a href="rendergallery.html">Renders</a></li>
			</ul>
		</li>
		<li><a href="location.html">Location</a></li>
		<li><a href="about.html">About</a></li>
		<li><a href="contact.html">Contact</a></li>
	</ul>
	
	<div id="content">
		<p>
			Countryside Cabinet Shop has been in business for more than 20 years, with a history of craftsmanship going back generations.  What started as a hobby has grown to become a full time cabinetry business.
		</p><p>
			Our main focus is on quality and customer satisfaction.  We believe in quality, and every cabinet or piece of furniture we build speaks for itself.  We install what we build, because we believe that cabinetry or furniture is only as good as the installer.
		</p><p>
			We are excited about the future and look forward to serving our community in the years to come.  You can rest assured that we will stand behind our craftsmanship.  Our goal is to design and build a product that is customized to fit your specific needs.  We will work with you from the early stages of design all the way to installation and completion.
		</p> 
	<!-- #content --></div>
	
	<hr />
	
<!-- #pageWrapper --></div>
	
<div id="footer">
	Quality From Design To Installation
<!-- #footer --></div>

</body></html>

Code (markup):

Gimme a few minutes to wake up and get some coffee in me, and I'll belt out the CSS to go with that 'fixing' any issues. A good number of issues can be resolved by adding a reset and explicitly declaring the border widths, NOT setting top or bottom borders.

 

Oh, some other issues I'm observing -- you're setting max-width on HTML, that doesn't even make any sense... there's no such thing as a four digit color like #3333; -- it's either three digits or six. you do NOT set min-height on body, there is no reason to ever say width:100%; on body. You probably SHOULD have a max-width on the wrapper, there is no reason to relop or set the width on .container -- AND the height declaration on that is more likely to cause problems than solve them. (though again, not sure why that even exists). NO CLUE why you are setting text-shadow on IMG, your anchor styling declarations aren't just pointlessly redundant, they're also gibberish, and as mentioned all your border declarations are NOT compatible with a min-height layout... I would also advise NOT trying to perfect width float the main menu, and stripping that float nonsense off it in the media queries.

I'll have a working demo in a bit for you.

--- edit -- you also don't have to say -webkit and -moz for background-size. NOBODY uses FF 4.0 anymore, and the -webkit version never supported 'cover' anyways.

 

Here's what I came up with:
http://www.cutcodedown.com/for_others/kyle3728/template.html

As with all my examples the directory:
http://www.cutcodedown.com/for_others/kyle3728/

is unlocked for easy access to the gooey bits.

I had to take a LOT of stylistic liberties since much of your design wasn't really viable for responsive/semi-fluid layout anyways... and yes, I opened it up semi-fluid. That meant redoing the header image, but that's ok since to be frank, those oddball borders and suddenly stopping gradient looked more like rendering errors than intentional design anyways. I also changed how the background was positioned, using "background-size:100% auto" instead of cover with it set to "bottom center" -- allowing me to chop a bunch of unneccessary space off the top of the image and shrinking it's filesize a wee bit. "cover" is handy, but on a image like that I felt it was chopping off so much at the sides and resizing so much, you couldn't even tell what that massive image was even supposed to be. (Though honestly, IMHO that image is WAY too large for deployment as part of a theme -- though I think I've told you that in the past).

Your borders were most of the problem -- the fancier styles like 'raised' are problematic enough -- without adding them to elements involved in a min-height layout... PARTICULARLY on the slid up footer and the min-heighted element itself... so those had to be axed. Probably for the better anyways since you were getting all sorts of funky border garbage that didn't line up at ALL, and borders like that will make old timers knee-jerk into saying "look at the 1995 design".

Hope this helps.

 

user below example:

html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;

font-family:arial,sans-serif;
font-size:small;
color:#666;
}

 

My oh my, you are correct. I fail to understand how they could mess up this new element by asking people to still use an UNORDERED LIST inside it, for a menu, whose items usually follow an order... It fails logic. Thanks for the heads up.

 

Exactly. That is exactly why NAV, and most, if not all new html5 tags are pure crap. They are all made to justify the misuse of what we already had, which was great. So many people are slapping a DIV around their navbar UL, which is pointlessly redundant, since UL is a block-level element.

Then we have SECTION, abused by the same people who did it with tables, than with DIV. But in this case, it's worse : SECTION has a semantic meaning, whereas DIV doesn't.

ASIDE, that's a very special one. It represents a section which is positioned aside. But wait, aasin't it presentation? Yes, it is! Since the latter has no business in your markup, so does ASIDE.

There is one tag that is redundant, but somewhere less than the others. FOOTER it is.
But honestly, what can <footer> do that <div id="footer"> can't? Oh yeah, you have to include some nasty bandwidth-eating javascript, else IE will go "bloah, I ain't stylin that".

 

Thanks a bunch! That looks a lot like I want it to look. Now I need to study the code until I understand it as I think a bunch of my problems have come from copy and pasting random suggestions and tutorials into my code. I have learned a lot but then when something becomes incompatible with something else it is over my head. And yes those images all needed reworked as that was one of the very first things I did starting with this whole project and trying to do things on Photoshop that I didn't know how to do with CSS. Back to my background image, is there a way to just fill in those margins on the side with it as all we ever need is just that little slice to fill the margin. Potential to decrease file size?