CODEWITHSUNDEEP
csshtml
Stephane Rolland
Stephane Rolland

Reputation: 39916

Is there way to make 2 or 3 or 4 div share the same equal space of a container div

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.

Upvotes: 0

Views: 750

Answers (2)

Edward Ruchevits
Edward Ruchevits

Reputation: 6696

CSS

div#container { width: 300px; height: 100px; }

div#container > div { float: left; width: 33%; height: 100%; }

/* Optional coloring */

div#one   { background: #ff0000; }

div#two   { background: #00ff00; }

div#three { background: #0000ff; }

HTML

<div id="container">

    <div id="one">
        One
    </div>

    <div id="two">
        Two
    </div>

    <div id="three">
        Three
    </div>

</div>

Upvotes: 2

Ladineko
Ladineko

Reputation: 1981

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.

Upvotes: 2

Related Questions