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



Inline-block layouts for div elements

Other layout methods

Inline blocks lets you line up div elements in a horizontal row rather than stacked like the default arrangement. For this to work you should set a 'width' value in your style sheet for each block. The advantage to inline layouts is that blocks will automatically move to a lower line if necessary and it gives you the ability to align blocks vertically. Consider this example:

<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='display: inline-block; height: 10px; width: 10px; border: 1px solid black; font-size: 0pt;'>

There is the DIV block...and set "display: inline-block"
Let's another:
<div style='display: inline-block; height: 10px; width: 10px; border: 1px solid black; font-size: 0pt;'>
<div style='display: inline-block; height: 10px; width: 10px; border: 1px solid black; font-size: 0pt;'>

See how they are both part of the same line. Line height is affected by the height of the tallest element in the line. So let's make a tall box:
<div style='display: inline-block; height: 10px; width: 10px; border: 1px solid black; font-size: 0pt;'>
<div style='display: inline-block; height: 30px; width: 10px; border: 1px solid black; font-size: 0pt;'>
<div style='display: inline-block; height: 10px; width: 10px; border: 1px solid black; font-size: 0pt;'>

You can use 'vertical-align' to adjust how blocks sit in the row. You can find 'vertical-align' values listed here.
<div style='display: inline-block; height: 10px; width: 10px; border: 1px solid black; ; font-size: 0pt;'>
<div style='display: inline-block; height: 30px; width: 10px; border: 1px solid black; ; font-size: 0pt;'>
<div style='vertical-align: top; display: inline-block; height: 10px; width: 10px; border: 1px solid black; font-size: 0pt;'>

In this case we put the last block at the top of the line to compensate for the tall box.

<div style='vertical-align: top; display: inline-block; height: 10px; width: 10px; border: 1px solid black; font-size: 0pt;'>
<div style='display: inline-block; height: 30px; width: 100px; border: 1px solid black; font-size: 0pt;'>
<div style='vertical-align: top; display: inline-block; height: 10px; width: 10px; border: 1px solid black; font-size: 0pt;'>
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


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>