Menu
I want to have block elements side-by-side. I don't don't want to use left, right, top, or anything similar.
<div class="iLB">LOLOLOL</div>
<div class="iLB">
This is content.<br/>
This is content.<br/>
This is content.
</div>
<div class="iLB">This, too?</div>
.iLB {
display: inline-block;
}
Live demo: jsFiddle
253
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
Using float and margin The left div is styled with width:50% and float:left – this creates the green colored div that horizontally covers half of the screen. The right div is then set to margin-left:50% – this immediately places it to the right of the left div.
To position the divs side by side, we are using the float property to float each . float-child element to the left. Since they are both floating to the left, they will display side by side if there's enough space for both to fit.
Use vertical-align:top;
.iLB {
display: inline-block;
vertical-align: top;
}
JSFiddle: http://jsfiddle.net/97wDh/1/
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
