Basic CSS Tutorial
Floating!
One of the hardest things for me to learn in CSS was floating.The biggest challenge in CSS is learning WHAT to add a property to. You may be adding a property correctly - to the wrong box. This is doubly challenging when floating a box.
Back when I first started building pages and wanted to put two items side-by-side, I would create a table with two cells and put one item in each cell. OR if one item was a picture, I could align the picture to one side or the other and the other stuff would move up beside it. With CSS, we use the FLOAT property.
When you assign a float to an object, you're instructing it to stick to a side of the space available and EVERYTHING under it in the HTML page will FLOAT up and stop at a level even with the top of the floated object. So you're not actually floating the object, you're floating the stuff that comes after it. If you only want to float some of the stuff, you have turn off the float for something underneath it. Before I tell you how to float, I want to tell you how to stop it so it doesn't get out of hand.
Most of the images in this tutorial are floated to the right. The reason I have horizontal rules between my sections in this tutorial is because I use them as a container to unfloat everything. The property (for this page) is
clear: right;
hr {
clear: right;
margin: 2em 10em;
color: #008080;
background-color: #ff0000;
border: 1px solid #ff0000;
}
When I build a template that has a menu down one side, it's floated and I use the footer div to unfloat the footer and keep it at the bottom of the page.
You can also stick in an empty div to unfloat <div style="clear: both;"></div>. The important thing to note is that you might have things floated on both sides of the page and you only want to stop the float on one side. You can clear the left, right or both.
Open this sample file and copy and paste the text into your page UNDER the closing tag for the table and above the closing div for content.
</table>
Paste here.
</div> <!-- content -->
Save and refresh.
I want to format our table so that the text will float up beside it; it shortens the distance people have to scroll.
Go to the table properties at bottom of your CSS file and add the line
float: left;
Save and refresh.
We added padding to the inside of our page and our outer-wrapper so that text wouldn't be smashed up against the side of the page. Now we're going to use MARGIN to add some space on the OUTSIDE of our TABLE (use the table section at the bottom of your CSS file).
margin: 1em;
But I don't want ALL that text to wrap around the table this time. I only want the first few sentences up there.
In your page, find the end of the fourth sentence, push the FIFTH sentence down two lines and, in the blank line, put the
empty div from above <div style="clear: left;"></div>
And now it looks like this.
Previous Next