You are currently browsing the category archive for the ‘Web Development’ category.
I just took a new job at Neogence last week as a frontend developer and one of the things that was bugging me about the site was the top navigation bar for our site. It would sit in the center nice and pretty, but often times when I’m on a computer I make the window skinny and have something off on the other side of the screen. Then, if I scrolled horizontally the menu’s repeating background would terminate!
<body>
<div id="wrapper" style="margin:0 auto;">
<div style="width:100%;background:green;">
<div style="width:1000px;color:white;">Make the window really skinny, and scroll to the right. Then make the window larger again from the left.<br />See? Ewwww...</div>
</div>
<div style="width:1000px;background:orange;">fixed-width content</div>
</div>
</body>
The problem shows up on lots of web sites, and it’s been bugging the crap out of me for years. Well, ladies and gentlemen, I have the solution. Put your web site in a giant table. No OKAY geez hold on, CALM DOWN I’m not talking about a <table> tag! This is a <table>-less design scheme. Check it out…
<body style="display:table; width:100%">
<div style="background:green;">
<div style="width:1000px; color:white">See how that makes everything better? Yeah. It does. Now just break it out in some .css files and you'll be solid. Woooo!</div>
</div>
<div>
<div style="width:1000px; background:orange; margin:0 auto;">fixed-width content</div>
</div>
</body>
Weird, right? You have no idea. So, just like the fisherman that forgot to count himself, all along I’ve been ignoring that the body tag is just another block-level element like any other. In fact, it’s THE block-level element. And you’re guaranteed it will fill the width of the page because it IS the page. Right? No. You can even set the body’s width and margins as if it was your precious wrapper div.
<body style="width:200px; margin:0 auto; background:orange;">
<p>Hello hello Mr. T. Have you ever looked at me? If you had I'm sure I'd be thrown. For I'm the fool. You pity me, I've known.<p>
</body>
Get it? But without a width, as a table, the body retracts to the maximum width of its contents. That’s why the width:100% is there. But it acts different than if it was a wrapper because the edges of a wrapper aren’t bound to the edges of the actual browser’s rendering space. Body is. So BOO-YA.
UPDATE:
Just today at work I was trying to fix the sticky footer at the bottom of the page. Well, this is one of the most complicated problems on the web, and I’m really surprised that the fix came so easy. Really, hardly anything has changed except that I applied height:100% to html and body. Yep. That’s all you have to do! 😀 So am I famous yet?
<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0}
html,body{height:100%}
body{width:100%; height:100%; display:table; background:black;}
#footer{height:100px; background-color:#210598; color:white; display:table-row}
</style>
</head>
<body>
<div style="height:300px; background:yellow; display:inline-block; padding:10px;">Content</div>
<div id="footer">
<p>hi i'm the footer</p>
</div>
</body>
</html>
Youre’ welcome to see a live demonstration, though the code renders perfectly in Chrome locally, and for some reason not online. I’ve sent Google a bug report about that. Chrome has a really stubborn cache!
UNC Asheville Multimedia Arts/Sciences Council 