CODEWITHSUNDEEP
htmlcss
Urbycoz
Urbycoz

Reputation: 7421

How can I position two divs below one div so they fill their container

I have three divs inside a container div. I need the top div to fill the whole width, and the bottom to to each fill half.

I've tried it using percentages but the bottom two divs keep appearing one on top of the other.

Markup:

<div>
    <div id="div1">DIV1</div>
    <div id="div2">DIV2</div>
    <div id="div3">DIV3</div>
    <br style="clear:both;" />
</div>

CSS:

div{
    border:1px solid black;
}

#div1{
     float:left; 
    width:100%;
    background-color:red;
}

#div2{
     clear:both;
     float:left;  
    width:50%;
    background-color:green;
}

#div3{
     float:left;
    width:50%;
    background-color:yellow;
}

See on jsfiddle

Is there a way to do this?

Upvotes: 1

Views: 87

Answers (3)

Amit singh
Amit singh

Reputation: 2036

This might help you..

div {
  border: 1px solid black;
  box-sizing: border-box;
}
#div1 {
  float: left;
  width: 100%;
  background-color: red;
}
#div2 {
  float: left;
  width: 50%;
  background-color: green;
}
#div3 {
  float: left;
  width: 50%;
  background-color: yellow;
}
<div>
  <div id="div1">DIV1</div>
  <div id="div2">DIV2</div>
  <div id="div3">DIV3</div>
  <br style="clear:both;" />
</div>

Upvotes: -1

RFLdev
RFLdev

Reputation: 186

Take a look at this fiddle. fixed it for you.

https://jsfiddle.net/639fzg65/9/

I gave the div surrounding the 3 divs a width of 100%

#container{
  border:1px solid black;
  width: 100%;
}

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

define this box-sizing:border-box;

because you define your #div2 or #div3 width 50% with border solid 1px

than your #div2 or #div3 width is 50%+border-left-width+border-right-width

50%+1px+1px

div{
    border:1px solid black;
    box-sizing:border-box;
}

more about box-sizing

Upvotes: 6

Related Questions