Site Development
Downloads
Help!!
Home
OverviewWe can position <div> boxes with the CSS "float:" property. This will position a box much like an image or <table>. Text can be made to wrap around the boxes (or not). Here's an example. This is the page we'll be making in this tutorial. You can quickly see why floated, or otherwise positioned, <div> boxes are replacing tabular formatting. Using The "float:" PropertyLets begin by making a page with some default text we want our boxes to float around:
<body> This is just a really simple page of text. Now lets code "Box #1", the red box. For starters, all floated boxes must be coded before any text that's to be presented beside or between them. This is just like formatting text with images from Beginning HTML.
<body> Again, take special notice that the box is placed before the text in your code. Now lets style Box#1 and use "float:" to position it to the left.
<style type="text/css"> The only new thing here is the "float:" property. This is what places the box to the left of the screen and puts the text to the right. Notice, too, that I've used "position: relative;". Absolute positioning doesn't work when floating boxes. Use "position: absolute;" when you want to place a box in an exact position. Since "position: relative;" is the default "postion:", you can just omit "position:" altogether. Dual Column FloatNow lets make the black Box #3 to the far right. We code this box before the page's text just like with Box #1. We can code it before or after Box #1, but it must come before the page's text.
<body> Again, you can code either box first, but they must both become before the page's text in the <h3> tags. Now lets look at "Box #3's" styling:
#box3 { At this point, you should have a page with the red and black boxes at the edge of the page and the <h3> text between them. This works just like putting text between two images using the <img> tag's ALIGN attribute. Multiple FloatsOn to the inner two boxes. The yellow box is styled with "float: left". It appears to the immediate right of Box #1 because its <div> is coded after the <div> for Box #1:
<body> The new box was coded and styled just like the others and is floated left with "float: left". Because one box has already been floated left, our new Box #2 appears as far left as it can, which is just to the right of the first left floated box. This occurs because the browser interprets a web page from its code from top to bottom. What's coded first is rendered first. The first box coded to "float: left" will go the the furthest left of the screen. The next box floated left will go as far left as it can. Box #4 shows what happens when another box is floated right. It works backward from "float: left;". In the case of "float: right;", the first <div> in the code that's floating right goes to the furthest right of the screen and subsequent <div>s styled with "float: right;" are put as far right as they can go -- just to the inside of the first floated box. Please note that all four of the floated boxes are coded before the page's central text. When you're playing around with this. Cut and paste the <div> code in the <body> to rearrange the order of the code. You'll soon see for yourself how the system works: 1) Boxes that are floated left are presented from left-to-right beginning with the first left floated box in the code. 2) Boxes that are floated right are presented right-to-left beginning with the first box that's styled with "float: right". 3) All floated boxes must be coded before any other text or content on the page that is to be presented between or beside them. Using <br clear="all">If you want something placed below a <div> box, like another floated box, you'll need to use a <br clear="all"> tag to make a line break.
<div id="box2"> This would cause subsequently coded boxes and content to go below the box. This would cause one line break below the top of the box. You may have to use extra <br> tags to add more whitespace. Check out this example to see this effect. One problem that comes up when using <br> tags is that the page's other content won't display or wrap properly. This is because of the break tags. The content wants to be positioned under the boxes, too. To get around this problem, all of the <div> boxes can be coded into one overall parent box. This parent box can then be floated and the text will wrap around the parent box, ignoring the internal boxes' <br>s. We'll be talking more about nesting <div>s inside each other in more detail later. Spacing Between BoxesNetscape and IE render floated boxes differently. Netscape will try to add some space between the boxes if any space is available in the page's overall width. IE will put the boxes right next to each other. You can add some space between the boxes in both browsers by using a "border:" that's colored the same as the background. This border can be as wide as you want to add some space between the boxes. border: solid white 10px; The above would put a 10 pixel border around our boxes. The white color would be the same as our example's background. This would give the appearance of 10 pixels of space between our boxes. Summary & Exercises
For an exercise, float 6 boxes across the top of a page with no page text or other content involved. Change the order of these boxes around in your code to see how this effects their presentation on your rendered page. Now add some standard page text or an image between these boxes. Finally, add some <br clear="all"> tags to get the boxes to fit beneath each other instead of beside each other. It takes a little practice and fiddling. Happy Note: You'll rarely be floating more than one box left and one right in practice. This mimics the 3-column tabular layout. |
You can "float" <div> boxes by using the "float:" property in their CSS styling. Floating boxes works a lot like using the ALIGN attribute in an <img> tag.
To Next Advanced CSS Lesson
Back To Advanced CSS Index