Question

I have following code

<div id="main">
    <div id="one"> </div>
    <div id="two"> </div>
    <div id="three"> </div>
    <div id="four"> </div>
</div>

I need to align the middle 4 div as below, keeping equal space at each side (top-space = bottom-space and right-space = left-space):

______________________________________
|                                    |
|         ________  ________         |
|        |        ||        |        |
|        |  one   ||   two  |        |
|        |        ||        |        |
|        |________||________|        |
|         ________  ________         |
|        |        ||        |        |
|        | three  ||  four  |        |
|        |        ||        |        |
|        |________||________|        |
|                                    |
|____________________________________|

Four div’s equally spaced, please can anyone me help me out here with any css snippet? Also I do see a lot of question over this, but can’t get this fixed. Can someone point me to any useful link that explains all the concepts related to the div alignment perfectly ?

(Folks, I know this would be a duplicate, but please help as I am just going round and round by googling.)

Thanks in advance 🙂

Answer 1

Here’s one way that works in all modern browsers, including IE8: jsFiddle example.

HTML

<div id="main">
    <div id="one"></div>
    <div id="two"></div><br />
    <div id="three"></div>
    <div id="four"></div>
</div>​

CSS

div {
    border:1px solid #999;
}
#main {
    width:400px;
    height:400px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
#one,#two,#three,#four{
    width:100px;
    height:100px;   
    display:inline-block;    
}

​
Note that i did have to add one break tag (<br />) to your code.