Float-based layouts, as we've mentioned before, are really flexible. However, we've seen many questions 'floating' around the web about how to center a float-based layout. It isn't hard making a floating div show up in the center, just read through the lesson and the code. Once again let us know if you have any questions or requests.
Why is a Float Different?
Centering a plain old vanilla div (without a specified CSS position mode) is easy. See below just in case you haven't done it before. You just need to tell the browser to automatically set the left and right margins. A float however is somewhat more difficult to center. Why? Because a float wants to snap to one place or another due to the very nature of float positioning.
The trick to centering a floated div is to use a few containing blocks. First you need to create a float or non-float div with a 100% width, then create just a few more following divs to make it happen, let's take a look.
Following are all of the key lines of XHTML code to make this work. Each line is described afterward. You can copy and paste this code into a test HTML file (within the <body> tag) and give it a try, making small changes, if you please, to see how it effects the layout.
Now the Center Float div Code
<div style="width:100%;">
<div style="width:300px; margin-left:auto; margin-right:auto;">
<div style="width:100%; float:left;background-color:#dddddd;">
<div style="width:100px;height:100px;float:left;border:1px solid red;">
</div>
<div style="width:100px;height:100px;float:right;border:1px solid blue;">
</div>
</div>
</div>
</div>
How the code looks in the Browser
The Purpose of each line:
<div style="width:100%;">
<div style="width:300px; margin-left:auto; margin-right:auto;">
The second line sets up a window with the width that we want for our centered content window, in our example 300px (pixels). Notice the margin-left and margin-right are set to "auto"? This is what centers a 'standard' div using CSS. Also notice that this isn't floated? This is required because if you use float:left or float:right the margin-left:auto and margin-right:auto would have no effect leaving the div aligned to the left or right margin.
<div style="width:100%; float:left;background-color:#dddddd;">
Up until now, the container divs have only given us a framework and screen position. The trick is here in this third line, it gives us a floating div as a container for the rest of our now-centered divs to float as we would like.
By the way, we colored the background grey just to show you that when using this method, the background grows with the size of this containg div. This is key, you can't skip this step or the background won't show up!
<div style="width:100px;height:100px;float:left;border:1px solid red;">
</div>
<div style="width:100px;height:100px;float:right;border:1px solid blue;">
</div>
These lines just draw two boxes, one red and floated left, the other blue and floated right. Just to demonstrate how nicely the floats work.