CODEWITHSUNDEEP
htmlcsscss-float
cvenko
cvenko

Reputation: 141

Horizontal alignment of multiple div elements

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;
}

Upvotes: 0

Views: 110

Answers (5)

Eoin2211
Eoin2211

Reputation: 911

Why not just use a simple table and specify widths?

Upvotes: 0

Arbel
Arbel

Reputation: 30999

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

Upvotes: 3

GolezTrol
GolezTrol

Reputation: 116190

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.

Upvotes: 1

Andrew Newby
Andrew Newby

Reputation: 5206

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)

Upvotes: -1

merc_shadow
merc_shadow

Reputation: 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.

Upvotes: -1

Related Questions