HTML: Box Model and Alignment

Question

I am trying to learn HTML and CSS and I am a bit confused on how to achieve my desired result. I created divs allowing me to split the page into 6 columns. I am attempting to make a middle section that would hold four pieces of content and would have a border around the four pieces while the entire page would be split into 6 columns. This is an outline of my structure:

<div class = "myRow">
<div class = "col-2">
</div>
<div class = "col-8">
    <div class = "col-2">
        content
    </div>
    <div class = "col-2">
        content
    </div>
    <div class = "col-2">
        content
    </div>
    <div class = "col-2">
        content
    </div>
</div>
<div class = "col-2>
</div>
</div?

The col-2 has width set to 16.66% and col-8 has width set to 66.66%. The divs inside the col-8 are inline and centered. In my mind the boxes inside the col-8 div should take up the entire col-8. However, there is a lot of extra space to the right. I thought this was because the percentages for divs inside col-8 refer to col-8's size, so I switched the col-2 on the inside to col-3 (25%). However, now they take up too much space and they wrap around. Is this an issue with padding/margins/border not being included in width or is it something else? How do I fix it?

CSS:

div.myRow
{
width: 100%;
display: flex;
flex-wrap: wrap;
}

div.col-1
{
width: 8.33%;
}
div.col-2
{
width: 16.66%;
}
div.col-3
{
width: 25%;
}
div.col-4
{
width: 33.33%;
}
div.col-5
{
width: 41.66%;
}
div.col-6
{
width: 50%;
}
div.col-7
{
width: 58.33%;
}
div.col-8
{
width: 66.66%;
}
div.col-9
{
width: 75%%;
}
div.col-10
{
width: 83.33%;
}
div.col-11
{
width: 91.66%;
}
div.col-12
{
width: 100%;
}

*{
-webkit-box-sizing: border-box;
-moz box-sizing: border-box;
box-sizing: border-box;
}

Answer 1

Maybe this is what you are looking for:

.col-2 {
    width:16%;
    text-align:center;
    display: inline-block;
}
.col-8 {
    display: inline;
}

.myRow {
    text-align:center;
}

When you put 16% for col-2 and 66% for col-8, it will try to set the width of your blocks inside col-6 to 16% x 66% = 11.1% of the whole parent's width. As a result, the width of your divs inside col-8 will be different than the ones outside.

Here is the link to a working example: http://jsfiddle.net/5jgkpscw/3/

Answer 2

The <div>s you have are not taking up the space of the col-8 because they are given the 16.66% width.

CSS percentages

Percentages in CSS are a calculation of an element with respect to its container. So your col-2 <div>s are 16.66% x 4 = 66.64% of the col-8's width.

You should also note, that your first col-2 that you have is not within the col-8 so it is going to take up 16.66% of ITS container, which is a different width entirely. This means changing your col-2 width to 25% works for the <div> inside col-8 but for the leftmost column that is outside of col-8 it's going to take up 25% of the screen, thus throwing off your whole structure.

Floating

There is also some subtle spacing between elements unless you handle that or float the elements left, so you'll want to fix that as well.

float: left;

Fix

Changing the col-2 property as follows gives you a col-2 element that takes up exactly 25% of its parent.

div.col-2
{
    width: 25%;
    float:left;
}

This means we'll want to rename or change the first col-2 because we don't want a leftmost column taking up 25% of the page:

<div class="myRow">
<!-- Change this col-2 to something else. col-2 now takes up 25% of its container -->
    <div align="center" class="co-1">
    </div>
    <div class="col-8" style = "border-style: solid; border-color: black">
...

And a working JSFiddle if it helps

Answer 3

Try setting the box-sizing property on your troublesome columns to border-box like so:

box-sizing: border-box;

This will include the width of any border or padding to your indicated width. Also be sure to clear any margins could be inherited.

margin: 0;