CSS margins study
- June 28th, 2009
- Posted in css . layout
- By David
- Write comment
CSS coding delivers more “WTF moments” than any other work activity I engage in these days. I need to understand it better, specifically CSS margins and floats. Made some time today to study up.
I read and re-read the articles below. They are aging but speak to a time when the evil IE6 was even more prominent than it is years later in 2009.
General insights include:
- Kill IE’s double margin bug with
display:inlineon a floated items. - When 2 adjacent elements’ margins meet, only the bigger margin is used.
- If an item’s 2 opposite margins meet, they both go away (self-collapse)
- Nested items without padding or border will cause the top and bottom margins of all to collapse. Left and right margins remain. Adding padding or border makes the margin come back.
- Set
overflow:hiddenon columns to prevent object blow out in IE. - To make columns,
float:lefton one andfloat:righton the other. - Self clear an object (always clear floats) with the
:afterfilter. (Example below.) - Center an item by setting
autoon left and right margins.margin:0 auto. - In addition to auto margins, to center an item in IE, also use
text-align:centeron parent, then reset text-align in child, usuallytext-align:left.
.columns:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Convert a list into a horizontal menu
Using background images instead of text. Fixed width, left margins, using negative margin on UL to cancel first margin.
<ul class="menu">
<li><a href="#somewhere1" id="link1"><em>link 1</em></a></li>
<li><a href="#somewhere2" id="link2"><em>link 2</em></a></li>
<li><a href="#somewhere3" id="link3"><em>link 3</em></a></li>
</ul>
ul.menu {
margin:0 0 0 -20px;
float:left;
width:100%;
}
ul.menu li {
list-style-type:none;
display:inline;
float:left;
margin:0 0 0 20px;
}
ul.menu li a {
display:block;
height:50px;
background-color: #0f0;
}
ul.menu li a em {
display:none;
}
ul.menu li a#link1 {
width:100px;
background-image: url(link1.png);
}
ul.menu li a#link1:hover {
background-image: url(link1-over.png);
}
ul.menu li a#link2 {
width:110px;
background-image: url(link2.png);
}
ul.menu li a#link2:hover {
background-image: url(link2-over.png);
}
ul.menu li a#link3 {
width:120px;
background-image: url(link3.png);
}
ul.menu li a#link3:hover {
background-image: url(link3-over.png);
}
Eric Meyer’s book “CSS: The Definitive Guide” has great chapter called “Floating and Positioning” that goes into all the rules of how floats behave. It’s a great resource! Check it out if you can.
Hey David, here’s some things that might help:
1) Display: inline; is indeed a life saver when it comes to older browsers. Should be in the habit of using it whenever floats are involved.
2) Concerning the higher of two margins being accepted: this is true ONLY for the top/bottom margins. Left/right margins will be added together.
3) For opposite margins: assuming you mean, for example, a left element with 20px, and a right element with -20px, that will indeed put them next to each other.
4) Not sure what exactly you’re referring to with padding/border. Perhaps an example?
5) Overflow: hidden; triggers the hasLayout trait for IE6 (and occasionally IE7), fixing a lot of typical issues. A quick search for “hasLayout” should yield tons about that bug.
6) Float left & right is one way to create columns. You can also float both of them the same direction (though pixel-perfect margins can be harder). You can also float one column and use a large margin on the other. For instance:
#left { float: left; width: 200px; }
#right { margin-left: 220px; }
That will give you a left column, and a 20px margin between it and the right column content. Another solution is also to use absolute positioning, which can be great for organizing content in a specific order in the HTML, but also removes elements from the flow of the page, so dynamic heights are almost out of the question.
7) Self-clearing an object can be good practice, but the :after CSS selector is not fully supported until IE8. IE7 is still in heavy use, so you should use it in conjunction with a standard clear (empty div, line break, whatever works).
Centering is on point. Remember you can still use top/bottom margins with left/right auto.
9) The horizontal menu w/ images is a start, though not the best recommended way, IMO. Give this article a good read: http://css-tricks.com/nine-techniques-for-css-image-replacement/ See which one works best for your situation (and you can get a good grasp on horizontal menus if you’re still struggling at all).
Hope that helps!