Question

This is what I try to achieve: the divs sharing the same space in equal proportion.
With the three divs being aligned at the right of each other.

<div>
    <div>
        <p>MyContentA</></p>
    </div>
    <div>
        <p>MyContentB</></p>
    </div>
    <div>
        <p>MyContentC</></p>
    </div>
</div>

I’m playing with the float style and I can’t figure out the way it works… It never does what I want, there’s always a new line between the elements: I want them side by side.

Answer 1

CSS

.parent {width:300px; height:100px;}
.child {width:33%; float:left; height:100px; background-color:red;}
.child2 {width:33%; float:left; height:100px; background-color:green;}
.child3 {width:33%; float:left; height:100px; background-color:blue;}

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child2">2</div>
    <div class="child3">3</div>
</div>

Example : http://jsfiddle.net/7uE84/

You can also change the child class to 1 class… i just made 3 so you can see all 3 of them in that parent div.