Using Float in CSS

Back to Computer Tips

Back to CSS Syllabus

The Computer Gal on Facebook
Ask to receive tips and handouts to your email.

Create a new web page in Dreamweaver.
Save the file: Exercises/3ColumnFloat.html
Title tag: Creating a three column layout with a float in CSS.
Highlight and copy the text from this exercise.
Paste the text into your open file using Edit-> Paste Special -> Text Only to keep out the HTML formatting. The numbering and line breaks will be missing.
Create a new Basic CSS file.
Save the file in the same folder as the 3ColumnFloat.html file as 3ColumnFloat.css.
Attach the CSS file to the 3ColumnFloat.html file.
Add two line breaks between items 5 & 6.
Copy an image from your computer to the same folder holding the html and css file you just created.
Insert the image at the line break.
Set this code into your CSS file
#Photo
{
float: left;
margin: 10px 10px 10px 0;
}
Add a <div></div> around the photo code. Dreamweaver may have put a <div></div> there already. Or, you may have a <p>.</p> If it's a <p></p>, just change them to div. Notice that the change doesn't make much difference!
Add id="Photo" to the <div>. Notice that the text now wraps around the photo. Notice the margin around the photo has more control than with the "hspace" or "vspace" properties.
Add this code before your #Photo in the CSS file:
#Container
{
}

#ContentArea
{
    width: 450px;
    position: absolute;
    top: 0px;
    left: 150px;
}
Wrap a container <div> around all the content of your new page. The only change you should see is the dotted line from the Container <div>
Wrap a ContentArea <div> around the content inside the Container. Notice that the width of the layer and the positioning apply. The contents aren't centered on the page, because the Container layer isn't centered.
Copy the text from this file into your 3ColumnFloat.html file between the last two </div> tags. This will put the text inside the Container, but outside the ContentArea. However, notice where it sits on the page! Why is that?
Add this code to your CSS file before #Photo.
#LeftPanel
{
     width: 150px;
     position: absolute;
     top: 0px;
     left: 0px;
}
Wrap a LeftPanel <div> around the new content. Now you have two columns. They probably aren't formatted very nicely, but that's something you can do later.
Copy the text from this file into your 3ColumnFloat.html file between the last two </div> tags. This will put the text inside your Container, but outside the other layers. However, notice where it sits on the page. Look familiar?
Add this code to your CSS file before #Photo. Why is left set at 600? Now you have three columns, but the spacing will need some work!
#RightPanel
{
     width: 150px;
     position: absolute;
     top: 0px;
     left: 600px;
}
Add this code to your CSS before #Photo. This will be a style for the Footer. The Footer is a special problem, because we want it to show up under the other layers, but we don't know what size those layers will be!
#Footer
{
display: none;
}
Add this code to your CSS before #Photo.
body
{
text-align:center;
}
Add this code to your CSS in the Wrapper
width:750px;
margin: 0 auto;
text-align: left;
position: relative;