I have four 25% width divs not fitting inside a 100% width div.
I'm unsure if this may have something to do with my borders or something.
So this is essentially the design I'm going for..
This is the result I am getting...
Here is the code I am using...
.main {
width: 100%;
height: 100%;
border: 2px solid #73AD21;
}
.titleContainer {
width: 100%;
height: 10%;
border: 2px solid yellow;
float: left;
display: inline-block;
}
.title {
width: 100%;
height: 100%;
border: 2px solid blue;
float: left;
}
.graphsContainer {
position: relative;
margin-right: 25px;
width: 100%;
height: 90%;
border: 2px solid yellow;
float: left;
display: inline-block;
}
.graph {
width: 25%;
height: 25%;
border: 2px solid purple;
float: left;
display: inline-block;
}
.graphImage {
width: 100%;
height: 90%;
border: 2px solid blue;
}
.graphTitle {
width: 100%;
height: 10%;
border: 2px solid blue;
}
<div class="main">
<div class="titleContainer"></div>
<div class="graphsContainer">
<div class="graph"></div>
<div class="graph"></div>
<div class="graph"></div>
<div class="graph"></div>
<div class="graph"></div>
<div class="graph"></div>
<div class="graph"></div>
<div class="graph"></div>
<div class="graph"></div>
<div class="graph"></div>
<div class="graph"></div>
<div class="graph"></div>
<div class="graph"></div>
<div class="graph"></div>
<div class="graph"></div>
<div class="graph"></div>
</div>
</div>
See Question&Answers more detail:os