myspaceprodesigns.com
css floats
- bookmark us
- add me on myspace
- add me on xuqa
- add me on yfly
10/27/2007 10:14 PM
Re: Link Probs. Please Help!
10/27/2007 07:28 AM
Re: Link Probs. Please Help!
css floats
Floats are a great tool that not many people use often or are familiar with. This website's entire layout used to be based on a three column float model. Let's start with defining what floats are.
A float is basically a way of telling your browser where you want to position something relative to the content which follows it. Some people call this "wrapping text" because that's how they use it. Floats can be used with both images and text.
In this tutorial, we will look at the different types of floats and how to use them individually or in correlation with one another. We can start with something simple. That is looking at something that has a left float and another that has a right float. Note in each of these where the float is in relation to where they are placed within the document. You can float just about anything you would like. Many people use floats primarily for putting pictures into their content or placing an advertisement somewhere within the content.
The next example we will look at uses both floats on the same page so you can see what happens to content that is between these floats. Take a look at our example of a page using both left and right float. Note on this that content gets squeezed between the floats and is returned to normal after the float's boundaries are breached.
The last thing that we do with floats is clear them by using the clear:both property. It is necessary to clear floats when you want your content to return to normal, especially is you are nesting elements or if you simply want your content to return to normal and necessarily wait to breach the boundaries of the float. Here is our example of clearing floats.
This seems simple enough, right? Well, sort of. Floats can be extremely tricky to get right in Internet Explorer because IE has lots of problems rendering them properly. The examples above work great crossbrowser because they are not nested and are relatively straight-forward and basic (which even IE can get right). However, as you increase the complexity of your document and start nesting things within floated elements, IE starts losing it and can really mess your website up. There are, of course, tricks to make it work, but before you try to make a page based on floats, you must understand how and why Internet Explorer messes them up and how to implement the corrections. To learn more about this, read our section on IE's deficiencies with floats.
Comments
View Comments (3) • Leave Comment • Support Forum