Animation


DIVs vs. Tables

Float Layouts

Inline Blocks

Block Layouts


Centering

Split Bkgrd

Graphic Borders

Horizontal Lists

CSS Colors


.htaccess

Block IPs

Down for Maintenance

Page Redirect

Custom Error Pages


Escaping query strings

PNG transparency

Google App testing

Flash Optimizing

Avoid AS Statics

SEO Optimization



Other layout methods

Floating DIV layouts instead of Tables

One strategy for formatting with DIV tags is to float DIV blocks up against eachother and use DIV blocks inside of DIV blocks to get the divisions you want. This strategy is demonstrated in this article.

This strategy for using DIV tags to layout your page is very simple and can be altered a few different ways. I tend to use "float" because I feel assured blocks are being flushed up against eachother. In the examples that follow, I will show examples inside a "mini" web page that will have a double border. Like so:

<div style="height: 100px; width: 600px; border: 3px double red;">

This be the mini web-page. Lets put a DIV block in it...
<div style='height: 10px; width: 10px; border: 1px solid black; font-size: 0pt;'>

There is the DIV block...lets add another:
<div style='height: 10px; width: 10px; border: 1px solid black; font-size: 0pt;'>
<div style='height: 10px; width: 10px; border: 1px solid black; font-size: 0pt;'>

Let's float them side-by-side using 'float: right'

<div style='height: 10px; width: 10px; border: 1px solid black; float: left; font-size: 0pt;'>
<div style='height: 10px; width: 10px; border: 1px solid black; float: left; font-size: 0pt;'>

Now let's embed blocks in eachother and get interesting
IMPORTANT: FONT-SIZE only needs to be 0pt for tiny boxes like in these examples. For larger boxes you can use the appropriate font sizes


<div style='height: 20px; width: 10px; border: 1px solid black; float: left; font-size: 0pt;'> </div>
<div style='height: 20px; width: 20px; border: 1px solid black; float: left; font-size: 0pt;'>
  <div style='height: 8px; width: 18px; border: 1px solid blue; float: left; font-size: 0pt;'>   </div>
  <div style='height: 8px; width: 8px; border: 1px solid yellow; float: left; font-size: 0pt;'>
    <div style='height: 6px; width: 2px; border: 1px solid green; float: left; font-size: 0pt;'>     </div>
    <div style='height: 6px; width: 2px; border: 1px solid green; float: left; font-size: 0pt;'>     </div>
  </div>
  <div style='height: 8px; width: 8px; border: 1px solid blue; float: left; font-size: 0pt;'>   </div>
</div>

And that is all there is to DIV layouts if you follow these rules:

See the example below. Notice the jagged boxes in the center area. These are all in an enclosing block that allows for the lining up of the page sans empty spaces. View the source code too see this. When you view the source search for the phrase "LOOK HERE" to jump right down to it.




Did you find this article userful for your website?
If so, why not provide a link to it? Just copy the following to your web page:

<a href='http://upwithabang.com/articles/css-divs-floatlayouts.html'>CSS layouts using floating div blocks</a>