Ten steps to teach you how to layout css (English)

Css

Not for everyone to translate it! Understand English should be able to read!

This is tutorial examines the different layout properties available in CSS:position:static, Position:relative, POSITION:ABSO lute, and float.

1. position:static

The default positioning for all elements is position:static, which means the element isn't positioned and occurs Where it normally would in the document.

Normally you wouldn ' t specify this unless you needed to override a positioning of that had been previously set.

#div-1 {position:static;}

2. position:relative

If you are specify position:relative, then can use the top or bottom, and left or righ the "T to move" element relative to where it would normally occur in the document.

Let's move Div-1 down pixels, with the left pixels:

#div-1 {position:relative; top:20px left:-40px;}

Notice the spaces where div-1 normally would have been if we had not moved It:now it is a empty space. The next element (Div-after) did not move when we moved Div-1. That's because Div-1 still occupies that original spaces in the document, even though we have moved it.

It appears that position:relative are not very useful, but it would perform an important task later in this Tutoria L.

3. Position:absolute

When you are specify position:absolute, the element is removed from the document and placed exactly where it To go.

Let's move div-1a to the top right of the page:

#div -1a {position:absolute; top:0; right:0; width:200px;}

Notice this time, since DIV-1A is removed from the document, the other elements on the page were positioned TLY:DIV-1B, div-1c, and Div-after moved up since the was no div-1a longer.

Also Notice that DIV-1A is positioned in the top right corner the page. It's nice to is able to position things directly the page, but it ' s of limited value.

What I really want is to position div-1a relative to Div-1. And that ' s where relative position comes to play.

Footnotes

• There is a bug in the Windows IE browser:if your Specify a relative width (like "width:50%") then the width of would be based On the parent element instead of the positioning element.

4. Position:relative + Position:absolute

If we set relative positioning on Div-1, any elements within Div-1 would be positioned relative to Div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of Div-1:

#div-1 {position:relative;} #div -1a {position:absolute; top:0; right:0; width:200px;}

5. Two column Absolute

Now we can make a two-column layout using relative and absolute positioning!

#div-1 {position:relative;} #div -1a {position:absolute; top:0; right:0; width:200px;} #div -1b {position:absolute; top:0; left:0; width:200px;}

One advantage to using absolute positioning was that we can position the elements into any order on the page, regardless of t He is they appear in the HTML. So I put div-1b before div-1a.

But Wait-what happened to the other elements? They are being obscured by the absolutely positioned. What can we do about that?

6. Two column absolute height

One solution is to set a fixed height on the elements.

But that isn't a viable solution for most designs, because we usually does not know how much text would be in the elements, or the exact font sizes that'll be used.

#div-1 {position:relative; height:250px;} #div -1a {position:absolute; top:0; right:0; width:200px;} #div -1b {position:absolute; top:0; left:0; width:200px;}

7. Float

For variable height columns, the absolute positioning does not work, so let's come up with another solution.

We can "float" an element to push it as far as possible to the right, and allow text to wrap around it. This is typically used for images, but we'll use it for more complex layout tasks (because it's only tool we have).

#div -1a {float:left; width:200px;}

8. Float columns

If we float one column to the left, then also float the second column to the left, they'll push up against each other.

#div -1a {float:left; width:150px;} #div -1b {float:left; width:150px;}

9. Float Columns with clear

Then after the floating elements we can ' clear ' the floats to push down the rest of the content.

#div -1a {float:left; width:190px;} #div -1b {float:left; width:190px;} #div -1c {Clear:both}

Disclaimer & Resources

These examples are extremely simplified and don't trigger some of the CSS bugs in the Windows IE browser (of which there are many).

The following page was invaluable:
Relatively absolute

While you ' re here check out the following:

• Barelyfitz Designs open-source Software Projects
• Barelyfitz Designs screencasts