I like my bars tight and dynamic. This is for CSS 3 & HTML 5
First, setting the Width to 100px is limiting. Don't do it.
Second, setting the container's width to 100% will work ok, until were talking about it being a header/footer bar for the whole app, like a navigation or credits/copyright bar. Use right: 0;
instead for that scenario.
You are using id's (hash #container
, #left
, etc) instead of classes (.container
, .left
, etc), which is fine, unless you want to repeat your style pattern elsewhere in your code. I'd consider using classes instead.
For HTML, no need to swap order for: left, center, & right. display: inline-block;
fixes this, returning your code to something cleaner and logically in order again.
Lastly, you need to clear the floats all up so that it doesn't mess with future <div>
. You do this with the clear: both;
To summarize:
HTML:
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
CSS:
.container {right: 0; text-align: center;}
.container .left, .container .center, .container .right { display: inline-block; }
.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }
Bonus point if using HAML and SASS ;)
HAML:
.container
.left
.center
.right
.clear
SASS:
.container {
right: 0;
text-align: center;
.left, .center, .right { display: inline-block; }
.left { float: left; }
.center { margin: 0 auto; }
.right { float: right; }
.clear { clear: both; }
}
overflow: hidden;
on thecenter
column. Then in media query for small devices when I had all 3 columns center on the page on top of each other, I neededoverflow: hidden;
on the middle row (which was the right column on large devices) otherwise it had no height and wasn't centered vertically between the top and bottom row.