align divs side by side and center

Question

i have 3 divs. 1 is container and i want those other two aligned in center side by side width same width. but it looks like this enter image description here

i want it to be aligned like this enter image description here

here are my codes:

HTML:

<div id="bottom-content">
   <div id="left-desc">

   </div>
   <div id="description-space">

   </div>
</div>

CSS:

#bottom-content{
    border: 1px solid black;
    overflow: hidden;
    text-align: left;
}
#left-desc{
    border: 1px solid orane;
    float: left;
    width: 50%;
    overflow: hidden;
}
#description-space{
    border: 1px solid orange;
    float: right;
    width: 50%;
    overflow: hidden;
}

you need to add `box-sizing:border-box` to your inner divs, the width adds the padding and border to it so your divs are over 50% which is why they aren't next to each other — Pete, May 20 '14 at 08:09

George · Accepted Answer · 2014-05-20T08:31:07.050

2

Remove your floating styles and display the <div> elements as table/table-cells.

A table element won't fill the width of its container, so also give it width:100% (or whatever width you desire). You should change the box-sizing property of your container to have the width include the border.

#bottom-content{
    border: 1px solid red;
    box-sizing:border-box;
    display:table;
    width:100%;
    overflow: hidden;
    text-align: left;

}
#left-desc{
    border: 1px solid yellow;
    display:table-cell;
    width: 50%;
    overflow: hidden;
}
#description-space{
    border: 1px solid black;
    display:table-cell;
    width: 50%;
    overflow: hidden;
}

JSFiddle

edited May 20 '14 at 08:31

answered May 20 '14 at 08:10

George

36,413
9
66
103

Its better to use `box-sizing` here – Mr. Alien May 20 '14 at 08:14
@Mr.Alien I was editing, made some changes. Also I assumed from the question that the heights of either element should match the height of the container, which is why I chose the `display:table-cell` approach. – George May 20 '14 at 08:15
thank man it helped. this did better because i have another div over this. thank you – user2513301 May 20 '14 at 08:17

score 2 · Answer 2 · answered May 20 '14 at 08:13

#bottom-content{
    border: 1px solid black;
    overflow: hidden;
    text-align: left;
}
#left-desc, #description-space { /* add this block */
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 400px; /* for demonstration purposes */
}
#left-desc{
    border: 1px solid orane;
    float: left;
    width: 50%;
    overflow: hidden;
}
#description-space{
    border: 1px solid orange;
    float: right;
    width: 50%;
    overflow: hidden;
}

Here's a Fiddle

align divs side by side and center

2 Answers2

Linked