Praneel PIDIKITI Praneel PIDIKITI - 11 months ago 40
CSS Question

Div side by side without float

How can I make div 'left' and 'right' look like columns side by side?

I know I can use float:left on them and that will work... but on step 5 and 6 in here http://www.barelyfitz.com/screencast...s/positioning/
the guy says it is possible, I can't get it work though...

Code:

<style>
div.left {
background:blue;
height:200px;
width:300px;
}

div.right{
background:green;
height:300px;
width:100px;
}

.container{
background:black;
height:400px;
width:450px;
}
</style>

<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
</div>

Answer Source

The usual method when not using floats is to use display: inline-block: http://www.jsfiddle.net/zygnz/1/

.container div {
  display: inline-block;
}

Do note its limitations though: There is a additional space after the first bloc - this is because the two blocks are now essentially inline elements, like a and em, so whitespace between the two counts. This could break your layout and/or not look nice, and I'd prefer not to strip out all whitespaces between characters for the sake of this working.

Floats are also more flexible, in most cases.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download