s.k.paul s.k.paul - 1 month ago 6
CSS Question

split a div into four equal div

What I would like to do is as follows-

------------------------------------
| ------------- ------------- |
| | 1 | 2 | |
| | | | |
| ------------- ------------- |
| | 3 | 4 | |
| | | | |
| --------------------------- |
------------------------------------


So far I tried-



body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#top {
width: 100%;
background-color: red;
height: 15%;
}
#bottom {
width: 100%;
background-color: blue;
height: 85%;
}
.inner {
width: 49%;
height: 49%;
border: 1px solid black;
float: left;
}

<div id="top"></div>
<div id="bottom">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
</div>





But all
inner
divs are left aligned. How can I align center horizontally within
bottom
div?

Answer

Use box-sizing: border-box; and you can use 50% because the border gets calculated in the percentage.

 body,html{padding:0; margin:0;height:100%;width:100%;}

    #top{
      width:100%;
      background-color:red;
      height:15%;
    }

    #bottom{
      width:100%;
      background-color:blue;
      height:85%;
    }

 .inner{
    width:50%;
    height:50%;
   box-sizing: border-box;
    border:1px solid black;   
    float:left;     
}
<div id="top"></div>
<div id="bottom">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
</div>

Comments