I tried to create a new layout for my site using inline-block instead of float.

```
<div id="container">

<div class="row"><!-- HEADER -->

    <div class="pan1">
        <div class="content">
             HEADER LEFT PANEL <br /><br />
        </div>
    </div>

    <div class="pan2">
        <div class="content">
             HEADER RIGHT PANEL <br/></div>
        </div>
    </div>

</div><!-- END HEADER -->

<div class="row"><!-- MAIN -->

    <div class="pan3">
        <div class="content">
             MAIN LEFT PANEL <br /><br />
        </div>
    </div>

    <div class="pan4">
        <div class="content">
             MAIN RIGHT PANEL <br/></div>
        </div>
    </div>

</div><!-- END MAIN -->

</div>

```

CSS

```
body { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
background-color: #f5f6f7; 
} 

#container { 
width: 960px; 
margin-left: auto; 
margin-right: auto;
background: #ccc;
} 

.row { 
margin-top: 10px; 
background: #fff; 
padding: 0px;
} 

.pan1  { 
width: 700px; 
display: inline-block;
vertical-align: top;
*zoom: 1;
*display: inline;
padding: 0px;
font-size: 0;
} 

.pan2  { 
width: 256px;
display: inline-block;
vertical-align: top;
*zoom: 1;
*display: inline;
padding: 0px;
font-size: 0;
} 

.pan3  { 
width: 500px; 
display: inline-block;
vertical-align: top;
*zoom: 1;
*display: inline;
padding: 0px;
font-size: 0;
} 

.pan4  { 
width: 456px;
display: inline-block;
vertical-align: top;
*zoom: 1;
*display: inline;
padding: 0px;
font-size: 0;
}

.content {
padding: 0px;
border: 1px solid #000;
font-size: 12px;
}

```

unfortunately I can not understand why it is not considered the hack to remove the white space between panels inline-block **and also the main block turns out to be not aligned with my header block**. Can you give me any suggestions on how I could make a correct layout? thanks