CSS Lesson #4
"Visual Layout Options"
This is the start of tableless design, but I won't get too much into that until lesson #5. Just remember: Internet Explorer has a lot of problems with these properties so it'll take a lot of trial and error to get everything to look how you want it to.
I use the <div> tag all the time because it's a very good, multi-purpose tag that divides the page into sections. Just about every CSS property can be applied to it which makes it far better than <span> (which only font formatting works on). <p> is another good one, but you can't nest paragraph tags and it has 10px top and bottom auto margins that you have to remember to remove.
: Basically the rule is "place floated elements as high and as far to one side as you can" but the details are importnant.
1. A float must be placed as high as possible.
2. A left-float must as far left as possible while a right-float must be as far right as possible. If this isn't possible then the float is as high as possible.
<div style="background-color:#406480; width:100px; color:#FFF; border:1px solid #000;">parent
<div style="background-color:#FFF; width:50px; color:#000; float:left; border:1px solid #000;">float #1</div>
<div style="background-color:#FFF; width:50px; color:#000; float:right; border:1px solid #000;">float #2</div>
</div>
3. The left outer edge of a box that's floated left can't be outside the left outer edge of its parent element. The same is true for right-floated boxes (but in terms of the right side). This can be overridden by the use of a negative margin. (
Example: margin-left:-20px;)
4. A float's outer top can't be higher than its containing (parent) element. This can be overridden by the use of a negative margin. (
Example: margin-top:-20px;)
5. If the box is floated left and there are left-floated boxes earlier in the document then the later box must be to the right of the earlier box or its top must be lower than the earlier box's bottom. There's a similar rule for right-floated boxes.
<div style="background-color:#406480; width:50px; color:#FFF; border:1px solid #000;">parent
<div style="background-color:#FFF; width:50px; color:#000; float:left; border:1px solid #000;">float #1</div>
<div style="background-color:#FFF; width:75px; color:#000; float:left; border:1px solid #000;">float #2</div>
</div>
6. The outer top of a floated box can't be higher than any block or float earlier in the document. This can be overridden by the use of a negative margin. (
Example: margin-top:-20px;)
7. If a box is left-floated its right outer edge can't be farther right than the left outer edge of a right-floated box that's to the right of it. If the right-positioned element came later in the document flow this rule wouldn't apply.
<div style="background-color:#406480; width:100px; height:50px; color:#FFF; border:1px solid #000;">parent
<div style="background-color:#FFF; width:50px; float:right; color:#000; border:1px solid #000;">float #1</div>
<div style="background-color:#FFF; width:75px; float:left; color:#000; border:1px solid #000;">float #2</div>
</div>
8. A left-floated box may not have its outer right edge to the right of the containing block's outer right edge unless it's already as far left as possible. There's a similar rule for right-floats.
<div style="background-color:#406480; width:50px; height:50px; color:#FFF; border:1px solid #000;">parent
<div style="background-color:#FFF; width:100px; color:#000; float:left; border:1px solid #000;">float</div>
</div>
RULES:
1. Elements are not longer a part of the document flow which means that they can overlap other content by mistake. The stacking order can be set with the "z-index" property.
2. The containing block is the nearest ancestor that has a value for the property "position" that isn't "static". If there is no such ancestor then the container is the webpage itself.
3. The position of the element is set by the "top", "bottom", "left", and "right" properties.
4. These values set the width of an absolutely positioned element: left, margin-left, border-left-width, padding-left, width, padding-right, border-right-width, margin-right, and right. The values for all of these must equal the width of the parent element.
5. The values set the height of an absolutely positioned element: top, margin-top, border-top-width, padding-top, height, padding-bottom, border-bottom-width, margin-bottom, and bottom. The values for all of these must equal the height of the parent element.
RULES:
1. Elements are not longer a part of the document flow which means that they can overlap other content by mistake. The stacking order can be set with the "z-index" property.
2. Elements behave exactly how they would if they were absolutely positioned.
RULES:
1. The containing block is the one if would have occupied in the normal document flow.
2. Top, bottom, left, and right are used to set the offset. Positive values move the element towards the center while negative values move it away. Top and bottom conflict with each other as does left and right.
RULES:
1. The values for the properties "top" and "left" are ignored.
back to the top