CODEWITHSUNDEEP
css
Paolo Rossi
Paolo Rossi

Reputation: 2510

CSS site layout with inline-block

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

Upvotes: 0

Views: 74

Answers (2)

Pengun
Pengun

Reputation: 744

the problem is within your html tags. you put other/extra ending </div> that is why the main block is not aligned like the header block

to remove the white space you will need to do this

<div>
 // content
</div><div>
// content
</div>

<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><!-- 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><!-- END MAIN -->
</div><!-- END CONTAINER -->

look at this for the demo

Upvotes: 2

Lo&#239;c Faure-Lacroix
Lo&#239;c Faure-Lacroix

Reputation: 13600

To remove spaces between blocks, you can try to write your html like this:

<div>
...
</div><div>
...
</div>

Having element start just after an other one will prevent the browser to add whitespaces between elements. It also means that you can't have newlines between elements. If I was you, I could instead think of using a minificator that will remove unnecessary whitespaces.

Upvotes: 0

Related Questions