CSS Tutorial - Learn CSS

Float a Box

As mentioned before CSS boxes replace HTML tables. These boxes can be positioned in a number of ways but the floating method is really useful. A floating box will occupy the next space it can fit into within the document. A box can float to the left or the right.

In the next example, 2 boxes are created to form a column for navigation (#navigation) and an area for the main website content (#mainarea). Copy and paste the red CSS code below into your tutorial.css document. Then copy and paste the red HTML code into your 'first_page.html' document. Save both and refresh your browser.

body {

background-color: #ffffff;

}

#header {

background-color: #f7dbaa;

border:4px solid #ffb777;

padding: 50px 0px 10px 40px;

width:800px;

}

h1{

font-family: verdana, garamond, arial;

font-size: 2em;

color:#1c146b;

}

#navigation{

float: left;

background-color:#f9bf9e;

width: 200px;

}

#mainarea{

float: left;

background-color:#f7e8aa;

width: 600px;

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>My First Web Page Using CSS</title>

</head>

<body>

<h1>My First Web Page Using CSS</h1>

<p> This is a great place to put your navigation links</p>

</div>

<p>I am going to build my first website using CSS and HTML. This is the main area of the website where all or most of my content would go. This could include text and images.</p>

</div>

</body>

</html>

What has changed? Have a look at the Example.

The pinky-orange navigation box has floated to the left creating the beginnings of a 200 pixel wide column. The main area has been given a yellowish background colour for demonstration purposes.

You are probably thinking that something has gone wrong because the main area does not reach the end of the Header section. If you look carefully at the CSS code, you would still be puzzled.... the #header has been given a width of 800 pixels, whereas the #navigation is 200 pixels wide and the #main area is #600 pixels wide. Surely 200 + 600 = 800?

In the previous exercise we added some padding and a border to the #header. Both of these add to the overall width of the header. Let us recalculate ... Left padding = 40 pixels, Left border = 4 pixels, Right border = 4 pixels. Therefore, the #mainarea should be 600 + 40 + 4 + 4 = 648 pixels.

In your 'tutorial.css' document ovewrite the #mainarea width as follows:

#mainarea{

float: left;

background-color:#f7e8aa;

width: 648px;

}

Again, click Save, then refresh your browser. It should look like this Example. Eureka! Now the main area width reaches the far right side of the Header width.

>> Next - More Floats >>