TyCamTech.com

Rule #1 when using CSS to break away from the table layout is that you have to know how to make a DIV tag float. There are "position" techniques which will be covered in a later article but to have a truly fluid and properly designed site, you have to know how to use the "float" attribute to make your HTML elements align side by side.

Float

The float attribute allows one HTML element to move from under another HTML to the side of it. If you would imagine 2 boxes, one piled on top of the other... allowing the bottom box to "float" would allow it to move up beside the top box instead of be under it.

The same principle applies to CSS.

The availabe options for the float attribute are:

• none - The object will not float and stays right where it should be. This is the default behavior.
• left - The element floats to the left.
• right - The element floats to the right.
• inherit - The element will inherit the float behavior of the parent element.. the HTML element that it's inside of.

To give you an idea of just how this would look, here is an example:

Very simple but can have some pretty wild results.

Predicting Odd Behavior

I say it is "odd" because the results might not be what you would first expect. For example, let's say you have 2 divs, and you set the first one to float: left; and the second one to float: right;... you might expect that they would line up beside each other and you are partially correct. However, if you have a page that is 800px wide and both divs are only 100px wide, what you would find is that the first div sticks right to the left edge while the second div sticks right to the right edge... no where near "next" to each other. Sometimes this is a desired effect, sometimes not.

To effectively make them be flush against each other what you would do is have them both set to float: left;. I know it sounds strange but this would tell the first div to move to the left edge and the next div to move to the edge of the first div... putting them next to each other. You can do the same with float: right;.

Sometimes you want something on the left edge and something on the right edge and so you put float: left; and float: right; but you still find that the div on the right sits just under the first div. Why is that? Well, divs tend to expand themselves as far as they can if you let them which means that 2 divs at 100% each can't possibly occupy the same line. One fix for this is to modify their widths, forcing them to fit into the same amount of space... another fix is to move the second div in front of the first div and THEN tell it to float: right:. I'm not 100% sure why this works but it does put it down onto the same line and right align it.

Another example is that you have a space that is 100% wide and you put 2 divs in it and set them both to 50% width and a border of 1px... when you load it into your browser, one div appears under the other. Why is that? Well, much like a word processor, CSS tries to make elements 'wrap' down when ever necessary and in this case, having 2 divs at 50% while having a border of 1px adds up to more than 100%. The 1px adds up to 4px if you add the left and right sides of both divs. That tiny amount tells the browser that they don't fit and wraps it down. Be very mindful of padding, margins, borders and other attributes which may make your divs larger than they seem.

Clear the float!

The final odd behavior happens when you make one div float left and it does that nicely but the next div does it too even though you don't want it too. What happens is that it's looking back at what the previous div was told and trying to do what it should with it. This is nice, sometimes, but often cumbersome.

The cure for this pain is the clear: both;, clear: left;, clear: right; options. These tell an HTML element that it's time to stop floating.

Some people will tell you that it shouldn't be necessary, that if you just position things properly you can get by without it but even those people use this sometimes and just don't admit it. This will save you many hours.

Sometimes you can sneak this right into the next div that you are going to use anyway but sometimes you can't, and don't feel bad... you can use an empty do nothing else div. There's nothing wrong with it. I'll give you an example:

If you know that the div next to it is a float right, then you could use clear: right; and be specific but I think you'll find that you use clear: both; most of the time as it's just easier and you don't have to change it later should you change it to a float left.

There's a lot more to getting your divs exactly where you would like them and still having them be "fluid" (move with your site depending on browser size)... but I simply can't cover it all in one article.

Follow these tips and guidelines and play around with it. You'll figure it out and if not, come back and ask. I'm always around.