How to Keep three div one below another.

Question

Inside the third div keep two divs side by side..

Answer 1

<!--
Using "display:flex;" as I've previously shown doesn't suit to you?

You can also do it through use of 'table' and 'table-cell' value for 'display' property, but 'flex' way is globaly better suited, if you doesn't encounter support lacks in old browsers ^^
-->

<style>
#wrapper {
background:magenta;
padding:2vh;
display:table;
height:30vh;
width:100%;
table-layout:fixed;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
#wrapper div {
display:table-cell;
width:50%
}
#wrapper div:first-child {
background:lime;
}
#wrapper div:last-child {
background:cyan;
}
</style>

<div id="wrapper">
<div></div>
<div></div>
</div>

Answer 2

<style>
#wrapper {
background:magenta;
padding:2vh;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-align:stretch;
-webkit-align-items:stretch;
-ms-flex-align:stretch;
align-items:stretch;
height:30vh;
}
#wrapper div {
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1
}
#wrapper div:first-child {
background:lime;
}
#wrapper div:last-child {
background:cyan;
}
</style>

<div id="wrapper">
<div></div>
<div></div>
</div>

<!-- Something like that? -->

<!-- Edited with vendors prefixed properties -->

Answer 3

If you'll make 3 divs in html whiteout inclosing one in the other they will already be kept one below the other because divs are block level elements and the default css of the browser tells them so.

Answer 4

this is how to make 3 div below each other
https://code.sololearn.com/WWBgnW3L4026/?ref=app

Answer 5

this is how to make two div side by side
https://code.sololearn.com/WwmULzL4y8v2/?ref=app

Answer 6

thanks for this code. I will try

Answer 7

<div style="display:block;"></div>
<div style="display:block;"></div>
<div style="display:block;"></div>
//note---u should put other styles like background color and width and higth to see the result

Answer 8

could you tell how to make 2div with equal width by side by side..with using display property..

Answer 9

this is the final of what u want
https://code.sololearn.com/WjhVn7N8butK/?ref=app

Answer 10

https://code.sololearn.com/Wwby3r03MZG3/?ref=app

Answer 11

pls check my code I want green color div in right side..how to acheive without using float, position

Answer 12

https://code.sololearn.com/W2KI646lsBWE/?ref=app

Answer 13

that's cool...can u explain in width calculation how it's works..

Answer 14

the 50%of width is without the border size so when u put the width 50% it will be bigger than 50%with border so that is the reason why u could not make them in one line .......the calc function decrease 6 px which is the border size

Answer 15

It has any other options to make same output using other property like margin,padding etc..or it's the only way to acheive!

Answer 16

#dar meer if I put -5px it will come down.either I put 6px I got result..what's is the browser calculation about this px?