Why Float?

What we'll be coding this sample during this tutorial. It makes a simple right column by using CSS's "float:" property.

When making a right column, "left:" becomes a little irrelavant. Think about it. How far right do you want to go? A column positioned for a 1024x768 monitor will cause side-scrolling (a near sin) on a more typical 800x600 one. Or, worse, it might overlap content.

When positioning a left column, this wasn't a problem because top and left are at 0 pixels at all resolutions. We don't have this advantage when making a column to the right of the page.

Using "float: right;"

To make a column that will automatically find the right edge of the screen, we must "float" it, as opposed to positioning it with "top:" and "left:". Here's how we float a <div> column to the right:

#box1{
position: relative;
float: right;
width: 100px;
border: solid 3px #000000;
background-color: #ffff00;
}

What's important to note in this box's styling is that we used the default "relative" value for "position:", as well as, the "float: right;" property/value pair. This is what puts the box to the right edge of the screen regardless of the screen's resolution.

The Right Content Margin

Using the "float:" property to position a <div> works a little differently than absolute positioning. For one thing, floated items works a lot like positioned <img>s. They will not overlap the content's text, but tend to bump right up against the content.

Secondly, the space between the content and the <div> can be trickier to figure out. Floating keeps the box from overlapping the text like with our absolutely positioned left box. But, content margins can still be a problem.

Often the content will bump right up against the <div>, and go beneath the <div> column if there is enough content. To take care of this we need to adjust the content's "margin-right:" to allow for the <div>.

This is similar to what we did with the left aligned column. Keep in mind that we aren't sure how many pixels to the right the <div> box is, so a pixel margin won't give a consistent spacing at all resolutions.

We can get around this by using a percentage value for the content's "margin-right:"

p {
font-family: Times New Roman, serif;
font-size: 15pt;
font-weight: 600;
color: #000000;
margin-left: 20px;
margin-right: 20%;
}

By using a percentage, the same relative amount of space will between the content and the <div>. You may have to play around with the actual percentage, but try to get roughly the same margin between the content and the <div> as you have on the left between the content and screen's edge. This makes the page look more esthetically balanced.

To maintain this balance, you'll probably want to use a percentage value for the content's "margin-left:" as well. These values may not be equal, but should provide an equal amount of white space on each side of the content. By using percentages, the relative white space at one resolution will be the same in another. You also don't run the same risk of your margins causing side-scrolling at lower resolutions.

After changing "position:" to "relative" and adding "float: right" to the box's styling, the box will be to the right. Use a percentage value in the content's "margin-right:" to add some space between the content and the box, and you're all done. Tweak the content margins and you'll have a page like this.

The Netscape Problem

If you view the sample page in Netscape you'll notice an annoying problem. The top of the content is lower than the <div> box. This isn't always much of a problem, but sometimes it is.

The only workaround for this is to put the content into a <div> box as well and position both boxes absolutely. You could also switch to tabular formatting.

Summary & Exercises

When putting a column to the right side of the page with CSS-P, position the box with "position: relative;" and "float: right;". This will float the <div> to the right edge of the screen regardless of the viewer's screen resolution.

Even though floating will prevent the box from overlapping the content, a right margin will generally be needed to add space between the content and the box and to keep the text from flowing under the <div> box. A percentage value for the content's "margin-right:" is generally used for this.

You should try to get a balanced look with the spaces on both sides of the content being equal. If you use a percentage value for one margin, you'll need to use a percentage value for the other. These percentages may not be the same, but they should provide the same padding at the left and right of the content.

Now, make a page with a longer right column using CSS-P. Leave out the content margins and see what you get. Try floating a box with "position: absolute;" instead of "relative".

Try floating boxes to the left and you'll see why it's easier to use absolute positioning for left columns. See if you can figure out how to get both a left and right column (next lesson).

To Next Advanced CSS Lesson

Back To Advanced CSS Index