Question

this is part of my code:

css :

.body .left, .right {
       position:relative;
       z-index:6;
       display:inline-block;
}
.body .left {
       top:0;
       left:0;
       width:100px;
       height:300px;
       margin-right:10px;
       border:1px solid #333;
}
.body .right {
       top:0;
       width:100px;
       height:300px;
       border:1px solid #333;
}

and html

<div class="body">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>

i want them to be in one line top:0;,when there is no data added to .left or .right div it works good, but the problem is that when i add text or something else to .left or .right div divs are arranged different, see example on jsfille to understand about what i’m talking.

View Example : JsFiddle

Answer 1

.body .left, .body .right {
    display:inline-block;
    vertical-align: top;
}

add the explicit vertical-alignment you want the inline-blocks to have;

Working example

.body .left, .body .right {
    display:inline-block;
    vertical-align: top;
    width:100px;
    height:300px;
    border:1px solid #333;
}
.body .left {
       margin-right:10px;
}
.body .right {}

If you want support for IE6/7 for your code you should add:

.body .left, .body .right {
   display: inline !ie7;
} 

that !ie7 is a hack, if you’d prefer not to use – just make sure those 2 classes get the value display: inline via a conditional comment .. whatever your preference 😉

HTML:

<div class="body">
    <div class="left">
        text
    </div>
    <div class="right">
    </div>
</div>