CODEWITHSUNDEEP
htmlcss
user1227914
user1227914

Reputation: 3514

how to get 3 divs to align besides each other on top another div?

To make it easier, I created a jsFiddle for this here: http://jsfiddle.net/ond1ju6p/

I am trying to get three divs to align besides each other on top of another div. I thought that giving the first two the width of 33.33% and the third one a width of 33.34%, it would equal the 100% width but that's not working.

What am I doing wrong?

Here is the HTML

<div class="box-top">
    <div class="box-top-left">Pig One</div>
    <div class="box-top-center">Pig Two</div>
    <div class="box-top-right">Pig Three</div>
</div>

<div class="box-bottom">Three little piggies had an awesome day.</div>

And the CSS

.box-top-left {
    background-color: #FFF;
    padding: 0px;
    border-width: 1px 1px 1px 0px;
    border: 1px solid #C4C4C4;
    border-radius: 5px 5px 0px 0px;
    display: inline-block;
    width: 33.33%;
}
.box-top-center {
    background-color: #CCC;
    padding: 0px;
    border-width: 1px 1px 1px 0px;
    border: 1px solid #C4C4C4;
    border-radius: 5px 5px 0px 0px;
    display: inline-block;
    width: 33.33%;
}
.box-top-right {
    background-color: #CCC;
    padding: 0px;
    border-width: 1px 1px 1px 0px;
    border: 1px solid #C4C4C4;
    border-radius: 5px 5px 0px 0px;
    display: inline-block;
    width: 33.34%;
}

.box-bottom {
    background-color: #FFF;
    padding: 10px 30px;
    border-width:0px 1px 1px 1px;
    border-radius: 0px 0px 5px 5px;
    border: 1px solid #C4C4C4;
}

Upvotes: 0

Views: 887

Answers (5)

lucchesi609
lucchesi609

Reputation: 3

I would add "float:left;" and "box-sizing:border-box;" (without quotes) to .box-top-left, -middle, and -right and then "clear:both;" to .box-bottom. If that doesn't work I would also make all the widths for those 3 boxes 33.33%.

Upvotes: 0

Ezra Bailey
Ezra Bailey

Reputation: 1433

The issue is because Inline-block divs respect whitespace. Thus your divs have tiny gaps between them from the return key.

Change:

<div class="box-top">
    <div class="box-top-left">Pig One</div>
    <div class="box-top-center">Pig Two</div>
    <div class="box-top-right">Pig Three</div>
</div>

to this:

<div class="box-top">
    <div class="box-top-left">Pig One</div><div class="box-top-center">Pig Two</div><div class="box-top-right">Pig Three</div>
</div>

and then add the following css rule to your divs:

box-sizing: border-box;

and it works for me.

Border-box makes the border included in the width size. It has good cross browser support.

js fiddle: http://jsfiddle.net/ond1ju6p/2/

edit: you could also try adding display:flex to the parent instead of removing whitespace.

.box-top {
    display:flex;
}
.box-top > div {
    box-sizing: border-box;
}

Flex solution fiddle: http://jsfiddle.net/ond1ju6p/3/

Upvotes: 5

mherzig
mherzig

Reputation: 1587

There are two issues hanging this up.

First is that inline blocks have implicit spacing, so they don't automatically bump right up against one another. That extra spacing is variable by browser and font size, so to get rid of it you can set font-size: 0 on the container element (in this case, .box-top). Of course you then need to reset the font-size on your child elements.

The next issue is that width doesn't include padding or border by default. So your boxes are 33.33%, plus another 2px (the border on both sides). The easiest fix for that is box-sizing: border-box on each child box, which will then include the border inside the width calculation. That would work on most newer browsers, but if your target browser doesn't support box-sizing (most do now, but check http://caniuse.com/#feat=css3-boxsizing) then you would need to fix it so that your boxes are even narrower to make sure the 1px border fits, and that can become a mess.

Upvotes: 0

petroni
petroni

Reputation: 776

The problem is, that you add 1px of border to each side, and thus the boxes become larger than 33.33%. (The border is added by your browser after it has already set the width). The easiest way to fix it would be using calc(33.33% - 2px) as the width.

Upvotes: 0

Bluety
Bluety

Reputation: 1909

You can use display table and table-cell like so:

.box-top {
    display: table;
    width: 100%;
}

.box-top-left,
.box-top-center,
.box-top-right {
    display: table-cell;
    width: 33%;
}

Upvotes: 1

Related Questions