how to make div as child of another div? - html

Question

I want to put three divs in order as following: input, break, ouput. And thier parent div is the container. I am facing problem in applying the box-sizing for these divs, here is my css:
html {
border: groove 8px red;
margin: 20px;
}
.container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height:75%;
}
.container .input {
width: 49%;
height: 100%;
border: solid 2px red;
float: left;
}
.container .break {
width: 2%;
height: 100%;
background: blue;
float: left;
}
.container .output {
width: 49%;
height: 100%;
border: solid 2px green;
float: right;
}

Answer 1

You have to apply box-sizing to the children as well:
.container > * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Answer 2

CSS's border-box property doesn't take into account margins. You'll need to set margin of 0 and adjust padding accordingly, but this may be undesired if you're using borders. You can try using percentages for margin so they (widths plus margins) add up to 100%. Also make sure that the child divs are inheriting box-sizing; you may need to define that specifically. I usually set this in CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Lastly, get rid of that .break div. Use margins instead.

Answer 3

Is your output div dropping below your input and break divs? That's because your border pixels are being added onto your widths.
49% + 2% + 49% + 8px of borders (2 on each side of input and 2 more on each side of output) > 100%
You'll have to try different things to get it to work, but dropping to 48% or even 45% might work. Since your area already floating left & right the extra space will just go in the middle.

Answer 4

this simple three-column layout DEMO
HTML
<div class="header">header</div>
<div class="layout">
<div class="col1">column 1</div>
<div class="col2">column 2</div>
<div class="col3">clolumn 3</div>
</div>
<div class="footer">footer</div>
CSS
.header, .footer { background: #D5BAE4; }
.layout { overflow: hidden; }
.layout DIV { float: left; }
.col1 { background: #C7E3E4; width: 20%; }
.col2 { background: #E0D2C7; width: 60%; }
.col3 { background: #ECD5DE; width: 20%; }

Answer 5

try this (compliments of _s). when you give it a % based width and then a px based border the default is to add them together, this should fix that.
*,
*:before,
*:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
-webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
-moz-box-sizing: border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
box-sizing: border-box;
}

Answer 6

LIVE DEMO
HTML
<div class="container">
<div class="input">
</div>
<div class="break">
</div>
<div class="output">
</div>
</div>
CSS
html {
border: groove 8px red;
margin: 20px;
}
.container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height:75%;
}
.container div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container .input {
width: 49%;
height: 100%;
border: solid 2px red;
float: left;
}
.container .break {
width: 2%;
height: 100%;
background: blue;
float: left;
}
.container .output {
width: 49%;
height: 100%;
border: solid 2px green;
float: right;
}