CODEWITHSUNDEEP
htmlcsscss-position
user3885600
user3885600

Reputation: 3

Positioning of 2 divs side by side each of width 50%

I have 3 divs inside a container. I want the first div to take up 100% width and the other dive to be of 50% and lie side by side below the first div. however if i give 50% width and float:left to other 2 divs, the 3rd div is going below the 2nd one. I tried with overflow and position also but could not get it to work.

CSS:

 .contentC{
        /*width:100%;*/
        overflow:hidden;
    }
    #box1 {
        background:#f00;
        float:left;
        width:100%;

    }

    #box2 {
        background:#0f0;
        float:left;
        width:50%;
    }
    #box3 {
        background:#055;
        float:left;
        width:50%;

    }

HTML:

<body>
<div class ="contentC">
    <div id="box1">Hi,Div1</div>
    <div id="box2">Hi,Div2</div>
    <div id="box3">Hi,Div3</div>
</div>
</body>

I've also tried with clearfix and overflow but could not get it working.

Upvotes: 0

Views: 756

Answers (2)

C Bauer
C Bauer

Reputation: 5103

Remove all margin and padding from box2 and box3 via padding: 0; margin: 0;

Upvotes: 1

Ben Potter
Ben Potter

Reputation: 321

I'm not sure I understand the context or what its doing that is unexpected, but what you have is correct sans a left float on the first div.

Here is a fiddle: http://jsfiddle.net/8n4Qx/

#box1 {
    background:#f00;
    width:100%;
}

Upvotes: 0

Related Questions