Horizontal alignment of multiple div elements

Question

I have three divs inside a parent div. I managed to align them horizontally, but when I add a border the third div jumps into new line. I've read many topics about this problem and couldn't find the right answer. The width of inner divs + border becomes to fat to fit the container, I believe. Any help appreciated.

HTML code:

<div class="a">
    <div class="b">
        <h3>Glavna pisarna</h3><hr />
        <p><b>Tel.:</b> 03 749 20 90</p>
        <p><b>Gsm:</b> 041 651 483</p>
        <p><b>Fax:</b> 03 749 20 90</p>
        <p><b>E-mail:</b></p>
    </div>
    <div class="c">
        <h3>Direktor</h3><hr />
        <p><b>Tel.:</b> 03 749 20 90</p>
        <p><b>Gsm:</b> 041 651 483</p>
        <p><b>Fax:</b> 03 749 20 90</p>
        <p><b>E-mail:</b></p>
    </div>
    <div class="d">
        <h3>Bar</h3><hr />
        <p><b>Tel.:</b> 03 749 20 90</p>
        <p><b>Gsm:</b> 041 651 483</p>
        <p><b>Fax:</b> 03 749 20 90</p>
        <p><b>E-mail:</b></p>
    </div>
</div>

CSS code:

.a{
    width: 100%;
    height: 220px;
    background-color: #CAE4FF;
}

.b, .c, .d{
    float: left;
    width: 33.33333333333%;
    height: 220px;
    background-color: white;
}

.b h3, .c h3, .d h3{
    margin-left: 11px;
}

.b p, .c p, .d p{
    margin-left: 11px;
}

.b hr, .c hr, .d hr{
    width: 95%;
    margin: auto;
}

.b, .c{
    border-right: solid 1px;
}

That's how the box model works. A workaround would be to declare box-sizing: border-box to those elements (basically it tells the browser to make the padding and the border inwards) — Jonas Grumann, Apr 07 '14 at 17:07

Arbel · Accepted Answer · 2014-04-07T17:19:01.647

3

This will do the job:

.b, .c, .d {
    float: left;
    width: 33.33333333333%;
    height: 220px;
    background-color: white;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
    box-sizing: border-box;       
}

Demo http://jsfiddle.net/jvLxh/

Reason: You will need to include the border width in the total width of the divs with box-sizing: border-box;

Read more on box-sizing: http://www.w3.org/TR/css3-ui/#box-sizing0

edited Apr 07 '14 at 17:19

answered Apr 07 '14 at 17:06

Arbel

30,599
2
28
29

Great answer. Learned something new today. Thank you. – cvenko Apr 07 '14 at 17:12

score 1 · Answer 2 · answered Apr 07 '14 at 17:09

I think Arbel's suggestion of using box-sizing is the best, or at least the most modern solution, but alternatively you can use extra divs.

Add an extra div inside each of the divs. The outer div (a, b, c) gets the width of 33.33%, the new inner div gets the border and will automatically occupy the available width.

This is especially useful if you need to support IE7, which doesn't support border-box. See http://caniuse.com/css3-boxsizing for details.

score 0 · Answer 3 · answered Apr 07 '14 at 17:30

0

Why not just use a simple table and specify widths?

answered Apr 07 '14 at 17:30

Eoin2211

911
2
19
39

Table layout using CSS, I hope? Using tables for layout is how we did it in the last century. – GolezTrol Apr 07 '14 at 17:34
If there is some issue with using CSS then it makes much more sense to use a table as is the case here. Just because its an older method it doesn't mean it won't work..... Even if it's from "the last century". – Eoin2211 Apr 07 '14 at 17:37
Or you can solve the problem using better CSS. Using tables for page layout negatively affects usability. See also: http://www.hotdesign.com/seybold/ and http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – GolezTrol Apr 07 '14 at 17:41

score -1 · Answer 4 · answered Apr 07 '14 at 17:06

-1

By adding a border that extra 1px is overflowing the 100% width you have on "a" container.

I'd suggest minimizing the width of your b, c, d containers to accommodate the extra 1 pixel you're adding.

answered Apr 07 '14 at 17:06

merc_shadow

1
4

score -1 · Answer 5 · answered Apr 07 '14 at 17:08

-1

Try it with just:

width: 33.2%;

The reason your 33.3333333% is dropping it onto a new line, is because its now gone over the 100% mark (as your additional 1px borders on them, is causing it to go over)

answered Apr 07 '14 at 17:08

Andrew Newby

4,941
6
40
81

Erm, what was the downvote for? It answered the question fine! – Andrew Newby Apr 07 '14 at 17:11
Well, I can imagine someone thinks that `0.1333333%` is not necessarily `1px` so there are better and more reliable solutions to this problem. – GolezTrol Apr 07 '14 at 17:16
That may be so - but in this case, simply changing it to that **would** have worked just fine - thus answering the question – Andrew Newby Apr 07 '14 at 17:18
If the container of that div would be 1538.5 px wide, then it would be just the right amount. For a wider page, the correction is too big, and the divs don't fill out the page, for smaller widths, the correction is not large enough and you still risk wrapping to the next line. It's just not a reliable method and therefor no useful answer since there are at least two reliable ways to do it. – GolezTrol Apr 07 '14 at 17:31
Well, at least I stand by my suggestion. Looks like the other people who suggested exactly the same thing, has changed his mind, and whole answer ;) – Andrew Newby Apr 07 '14 at 17:33

Horizontal alignment of multiple div elements

5 Answers5