Laurent Laurent - 4 months ago 12
CSS Question

css divide div into four equal parts with padding

i have a content div, and in there i would like a have four equal div's depending
on the page's width and height.

currently this is my code:

HTML:

<div id="content">
<div class='A' id="none" data-panel_type="none">
<textarea id="1" name="none"></textarea>
</div>
<div class='B' id="none" data-panel_type="none">
<textarea id="2" name="none"></textarea>
</div>
<div class='C' id="none" data-panel_type="none">
<textarea id="3" name="none"></textarea>
</div>
<div class='D' id="none" data-panel_type="none">
<textarea id="4" name="none"></textarea>
</div>
</div>


CSS:

#content {
border: 2px solid;
width: 100%;
height: 100%;
position: relative;
top: -15px;
left: -15px;
padding: 10px;
}

#content .A {
border: 2px solid;
width:50%;
height: 50%;
float: left;
background: purple;
}

#content .B {
border: 2px solid;
width:50%;
height: 50%;
float: left;
background: purple;
}

#content .C {
border: 2px solid;
width:50%;
height: 50%;
float: left;
background: purple;
}

#content .D {
border: 2px solid;
width:50%;
height: 50%;
float: left;
background: purple;
}


what do i need to change to it in order to work? thanks.

Answer

you could use box-sizing property (further information on MDN), adding

#content, #content > div {
    -webkit-box-sixing: border-box;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

see http://jsbin.com/egukon/1/edit

Comments