Centering floating DIVs

This post shows you how to put floating DIVs aligned to the center of the parent container whose width not set. The CSS makes the parent container act like a table and the child DIVs as cells

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Center Div</title>
        <style type="text/css">
        #container
        {
            text-align:center;
            margin:0 auto;
            display:table;
        }
        #container div
        {
            float:left;
            padding:5px;
            display:cell;
        }
        </style>
    </head>
    <body>
        <div id="container">
            <div style="background-color:yellow">Text 1</div>
            <div style="background-color:lightgreen">Text 2</div>
            <div style="background-color:lightblue">Text 3</div>
        </div>
    </body>
</html>

You can see the output here. Works in IE8

Category : General . Tags : , .

One Response to Centering floating DIVs

  1. MustangManiac says:

    Awesome !!

Leave a Reply