Hello, I'm following Cutcodedown.com /for_others examples and some customization and I have a problem with the footer. It has too much height in webkit (Midori browser and https://www.url2png.com renderer). Can you help me to solve this? HTML: <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width; height=device-height; initial-scale=1"> <link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection,tv"> <title>Example</title> </head> <body> <div id="top"><div class="widthWrapper"> <h1> <a href="/">Layout</a> </h1> <ul id="mainMenu"> <li> <a href="/">Home</a> </li><li> <a href="option1">Option1</a> </li> </ul> <!-- .widthWrapper, #top --></div></div> <div class="columnWrapper"><div class="widthWrapper"> <div class="contentWrapper"><div id="content"> <div id="article" class="contentBox"> <h2>News <small>11-04-2016</small></h2> <p>Paragraph</p> <h2><a href="#">Heading 2</a></h2> <p>Paragraph</p> <h2><a href="#">Heading 2</a></h2> <p>Paragraph</p> <!-- .contentBox --></div> <!-- #content, .contentWrapper --></div></div> <div id="extras"> <div class="firstSection"> <div class="contentBox"> <h2>Heading 2</h2> <p>Paragraph.</p> <!-- .firstSection --></div></div> <div class="secondSection"> <div class="contentBox"> <h2>Heading 2</h2> <p>Paragraph</p> <!-- .contentBox --></div> <!-- .secondSection --></div> <!-- #extras --></div> <!-- .widthWrapper, .columnWrapper --></div></div> <div id="footer"><div class="widthWrapper"> <hr> <ul id="subMenu"> <li> <a href="/#top">Go up ↑</a> </li> </ul> © 2016 Foonet<br> <small>Small text.</small> <!-- .widthWrapper,#footer --></div></div> </body> </html> Code (markup): CSS: /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img, fieldset { border:none; } hr { display:none; /* HR in my code are for semantic breaks in topic/section, NOT style/presenation, so hide them from screen.css users */ } @media (max-width:480px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } html, body { width:100%; height:100%; } body { display:-webkit-flexbox; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; min-width:48em; /* for pre CSS3 browsers */ font:normal 90%/150% "segoe ui",helvetica,sans-serif; background-color: #442203; } #top, #footer { -webkit-flex-shrink:0; -ms-flex-shrink:0; flex-shrink:0; } .widthWrapper { overflow:hidden; /* wrap floats and margins */ zoom:1; /* trip haslayout, wrap floats and margins legacy IE */ max-width:64em; margin:0 auto; /* center */ padding:0 1em; } * html .widthWrapper { /* legacy IE can't do min/max-width, so shove a fixed width at them. OH WELL, they should be thankful we bother even thinking about the folks still using it! */ width:48em; } h1 { float:left; padding:0.3em 0 0 0.2em; } #top h1 a { color:#fff; } .columnWrapper { padding-top:1em; -webkit-flex:1 0 auto; -ms-flex:1 0 auto; flex:1 0 auto; background-color:#f9f4ef; } .columnWrapper, .contentBox { clear:both; overflow:hidden; zoom:1; } .contentWrapper { float:left; width:100%; } #content { padding:0em 1em 0 0; margin-right:18em; /* == #extras width */ } #extras, #extras .firstSection, #extras .secondSection { position:relative; } #extras { float:left; width:18em; margin-left:-18em; /* == width */ } .contentBox { padding-bottom: 0.5em; margin-bottom:1em; background-color:#fcfcfc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; /* future proofing */ -khtml-border-radius: 5px; /* for old Konqueror browsers */ } #mainMenu { list-style:none; text-align:center; float:right; max-width:19em; margin-top:0.5em; } #mainMenu li { display:inline; padding:0; margin:0; } #mainMenu a { display:inline-block; width: 8em; text-transform:uppercase; text-align:center; font-weight:bold; text-decoration:none; padding:0.3em; margin:0.3em; color:#fff; background:#85450d; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* for old Konqueror browsers */ text-shadow: 0 0 2px #000; border-bottom:2px solid #000; } #mainMenu a:hover { text-shadow: horizontal-offset vertical-offset blur color; text-shadow: 2px 4px 3px rgba(0,0,0,0.3); border-bottom:0; } Code (markup): Please, could you recommend me some site to learn CSS properly?
Well as the author of that site I can probably at least see what your issue is... Could you explain what you mean by "too much height"? Oh, you mean the content area isn't pushing it down... It LOOKS like those are using outdated versions of webkit that doesn't support flex properly (if at all)... so it is in fact showing the same graceful degradation that IE9 and earlier would also get. There are NOT a lot of practical ways around that problem, which is why I just live with it. To be brutally frank, the browsers still using the webkit branch are buggy outdated train wrecks! Anything that hasn't flipped off Apple and switched over to Google's Blink is going to be buggy, unreliable, and not do certain effects like flex properly if at all. See why it's now "nw.js" instead of "node-webkit" -- even they told Apple to suck it. There's a reason developers have taken to calling Safari (and by extension webkit) "the new IE 6" -- Apple is resting on it's laurels knowing damned well we have to support them thanks to all their iOS devices, so to hell with keeping up with standards anymore. Of course it doesn't help that Google made off with all the talented free labor when they forked off Blink from Webkit. Most of the developers were sick of Apple's bullshit anyways. Pretty much as older browsers age like milk, you'll either end up throwing scripttardery at it, using outdated site building methods, or just learning to live with the fact those steaming piles of crap are not going to get the fancy effect you want. I've generally chosen the latter, so long as the page is USABLE, I'm not going to bend over backwards to make sure something as silly as a sticky-footer does what I want it to. After all, graceful degradation -- delivering a page that works regardless of missing bits of fancy tech -- is what HTML and CSS are supposed to do in the first place... Someone doesn't get rounded corners? Oh well... they don't get box-shadows or text-shadow? Oh well. They don't get RGBA, Oh well. So you can imagine my answer to the content not pushing the footer down when the screen is too short in IE9/earlier or outdated webkit browsers. So long as the page works delivering what really matters -- the content -- OH WELL. There are outdated methods of site building that can do what you want -- tables for layout, or if you know the exact fixed height of the footer there's the min-height + negative margin trick... neither is entirely desirable and have some major issues, but if you REALLY need to do it, there are ways. Pretty much 100% min-height sucks no matter how you do it. Flex is SUPPOSED to fix that and, well... it doesn't in all browsers. Again, there's a reason you will now hear developers increasingly cursing webkit the way they used to do IE6... or Netscape 4 / Mozilla Suite back in the pre-Firefox days where IE6 was "the only browser that matters". It seems to be going in cycles... Gecko is now seeming to age pretty poorly too; it's scary when Microshaft FINALLY did the smart thing and pitched trident in the bin to make Edge.
Thank you *very much*, your information is highly appreciated and your articles are helping me a lot. I also prefer the graceful degradation to the bloatware scripttardery so I'll stick to flex. I'm applying the "Progressive enhancement" method for a new site. I wrote the content first, then the minimalistic semantic markup and later I adapted the design (with web safe colors and good contrast) to the content. Once I got a single page with content + HTML + CSS I created a wok template (http://wok.mythmon.com/) and then converted the articles to markdown. This static generator is working very nice for me, it generates a fully static site from templates and markdown content. Best regards, Puntocom81.
Never heard of Wok, but looking at it I'm not sure how seriously I'd take it. Personally I hate "markdown" as I can never remember the needlessly and pointlessly vague "wait, how many asterisks mean what...ok, why are my tabs making code blocks?" idiocy. I figure that if someone is smart enough to handle this "markdown" nonsense, they should be smart enough to handle markup. More worrysome about "markdown" is that it doesn't even have proper semantics for HTML in it's structure -- there's no way to mark grammatical paragraphs, the differences between b, i, strong, and em (since all four have different meanings!), and so forth. Though their site is worrysome and shows they don't know enough HTML to be telling others how to build websites. See the 4 tranny document with 5 tags, the aborted hgroup tag that was dropped from the 5 specification nearly four years ago as pointless idiotic nonsense (like most new HTML 5 tags IMHO)... ... and looking at it, the whole thing doesn't look like it does anything I couldn't do with less work in less time flat from PHP. That it seems to slop things together with a bunch of python garbage doesn't really blow my skirt up... but to be fair I've never been a fan of most of these needlessly cryptic "templating" systems with their uselessly vague {%$^ random character asshattery.... makes me miss assembly language as even that was simpler. I swear every generation people come up with rubbish that tries to make C look overly verbose; but as a worshiper at the throne of Wirth let's just say "C is not my favorite programming language". Thinks that make C look simple? HERPADERP! YMMV.
Wok allows you to use plain HTML files. It generates static sites so your site will only require a simple web server giving less maintenance and headaches. It's simply a generator, not a program that runs in the server. Not the perfect solution but it allows me to put content online without having to worry about the insecurity of my programming or having to add extra software to the server.
Heh never heard of Wok, I use http://jekyllrb.com once in a while though. As for your problem I'm guess it's because the actual height of the page is less then 100% height of your window. It actually looks better the way you have it than having white blank space below or whatever. I wouldnt worry about it because you should have enough content to fill a page. If you must you could set a minimum height on your body. min-height: calc(100vh - footer-height); This will just fallback to what you have for older browsers. I think that works on IE10+. If you wanted to get crazy over a stupid issue, this should work on IE8+. I think anything less you'd probably have to throw some javascript in the mix: http://codepen.io/sitechop/pen/KzJyEx It's kind of bad practice relying on defined heights though. Honestly, I think what you have is the best already.