CODEWITHSUNDEEP
htmlcss
MD.MD
MD.MD

Reputation: 718

how to make div as child of another div?

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;
}

Upvotes: 1

Views: 1030

Answers (6)

CMPS
CMPS

Reputation: 7769

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;
}

Upvotes: 0

MaKR
MaKR

Reputation: 1892

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.

Upvotes: 1

KnightHawk0811
KnightHawk0811

Reputation: 931

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;
}

Upvotes: 0

Misunderstood
Misunderstood

Reputation: 126

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;
}

Upvotes: 5

Alex Wilson
Alex Wilson

Reputation: 2419

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%; }

Upvotes: 0

Slider345
Slider345

Reputation: 4758

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.

Upvotes: 0

Related Questions