Sum of column width equal to parent width, but don't fit in

Question

I'm stuck about columns width applying a design into my website. The total width of the website is 1024px, and there is a padding left/right of 18px. Two outter columns sized by 132px in width surround 6 others columns of 109px. Each column is separated by gutter of 10px.

Problem : All my columns doesn't fit inside the parent #centralMainBlock, so the last column get into the next line.

Here is my HTML :

<body>
<div id="centralMainBlock">

    <div id="leftColumn" class="exteriorColumn">
        Left col
    </div>

    <div id="contentBlock">
        <div id="menuLine">
            <div class="col-md-2 bootCol">Summary</div>
            <div class="col-md-2 bootCol">Transfer</div>
            <div class="col-md-2 bootCol">Portfolio</div>
            <div class="col-md-2 bootCol">Advice</div>
            <div class="col-md-2 bootCol">Performance</div>
            <div class="col-md-2 bootCol">Activity</div>
        </div>
        <!-- website content -->
    </div>

    <div id="rightColumn" class="exteriorColumn">
        Right col
    </div>
</div>

And my CSS:

body
{
    width: 1024px;
    height: 100%;
    margin: 0 auto;
}
#centralMainBlock
{
    width: 988px; /* 1024 - 2*18 */
    margin: 0 auto;

}

#centralMainBlock > div
{
    display: inline-block;
    vertical-align: top;
}
.exteriorColumn
{
    width: 132px;
    height: 100%;
}

#contentBlock 
{
    /* 6*109 + 5*10 + 2*5 
       6 central columns + 5 gutters between these + half gutter (right/left)
   */
    width: 714px; 
}

As i use bootstrap, i have to modify the gutters between the columns :

.bootCol
{
    padding-left: 5px;
    padding-right: 5px;
}

#leftColumn
{
    margin-right: 5px;
}

#rightColumn
{
    margin-left: 5px;
}

Here is a JsFiddle showing the error. I've added background colors. You may extend the "Result" window because i used bootstrap for big screen (col-md-*).

If i remove 8px of margin of the last column, this one for a the end of the first line (as expected). Where are these 8 px ? ? I didn't use border (border takes place in a block).

Anyway, thanks for any help.

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

Your middle column is inline-block. If you change it to block with floating, than the spacing will be correct:

#centralMainBlock > div {
    display: block;
    float: left;
    vertical-align: top;
}

Updated Fiddle

More about spacing with inline elements in this toppic.

edited May 23 '17 at 11:58

Community

1
1

answered Sep 13 '15 at 23:25

skobaljic

9,379
1
25
51

Thanks a lot ! I've learn a great thing on web design. And a good reason to not using `inline-block` every time i want aligning blocks :-) – Marcassin Sep 13 '15 at 23:37

Sum of column width equal to parent width, but don't fit in

1 Answers1