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



DIV block layouts

Other layout methods

The standard layout for div elements is to show them one under the other.
As so:

box number one
box number blue

And the code for that is similar to:
    <div>
        <div>
            box number one
        </div>
        <div>
            box number two
        </div>
    </div>

Unfortunately this is rather limited since it insists that the left side of each block touches the left of edge of its container. However that doesn't mean that you can do alot using padding and margin settings.:

<div style="border: 6px solid black; width: 400px; height: 200px">
There is free space to the right of green yet the blue
box is forced down to the left margin.
<div style="border: 2px solid green; width: 50%; height: 50px">
</div>
<div style="border: 2px solid blue; width: 52px; height: 50px">
</div>
But you can make use margins to adjust things, like for this red box <div style="margin-top: -50px; margin-left: 70px; border: 2px solid red; width: 52px; height: 50px">
</div>
</div>
There is free space to the right of green yet the blue box is forced down to the left margin.
But you can make use margins to adjust things, like for this red box

Margins and widths (also padding and height) are not the best ways to try positioning your page elements.
Fortunately there are at least 2 ways around these shortcomings.

  1. Using float alignments like     
      (that is a little set of divs)
  2. Using inline blocks like     
    left
    center content
    right
    A
    B
    C
    D





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-blocklayouts.html'>CSS layouts using div blocks</a>