align 2 divs horizontally inside a third container div

Question

I have the following code:

<div id="container">
    <div id="div1">Div 1</div>
    <div id="div2">Div 2</div>
</div>

I want to be able to have #box1 and #box2 one next to the other inside the container. Container is centered

It helps if you tell us what CSS you currently have, and what the specific problem is. — Jeroen, Aug 01 '12 at 18:02
css is complicated each box carries several elements...I tried to simplify the code by providing a basic structure — cppit, Aug 01 '12 at 18:08
There's nothing in your container. All other div's are outside... — Forty-Two, Aug 01 '12 at 18:11

Alex W · Accepted Answer · 2017-03-08T16:42:31.577

25

This will center the container, and have the two divs within it centered, while separating the styles from the actual content:

HTML:

<div id="container">
    <div>Div 1</div>
    <div>Div 2</div>
</div>

CSS:

#container > div
{
    display: inline-block;
    border: solid 1px #000;
}
#container
{
    border: solid 1px #ff0000;
    text-align: center;
    margin: 0px auto;
    width: 40%;
}

Working example:

http://jsfiddle.net/JLjjK/

2017 Update:

Flexbox is becoming much more commonplace. Here's a way to achieve similar results with Flexbox:

HTML:

<div class="outer">
  <div>1</div>
  <div>2</div>
</div>

CSS:

.outer {
  border: 1px solid #000;
  display:flex;
  justify-content: center;
  padding: 3px;
}
.outer > div {
  border: 1px solid #000;
  margin:2px;
}

Example: https://jsfiddle.net/pb61a1cj/1/

edited Mar 08 '17 at 16:42

answered Aug 01 '12 at 18:09

Alex W

37,233
13
109
109

3

This only works when both divs don't have a lot of text. – MrSnowflake Nov 12 '13 at 08:45
@MrSnowFlake It should still work fine, you just have to set the widths of the divs to half of the width of the container: http://jsfiddle.net/JLjjK/172/ – Alex W Nov 12 '13 at 14:10
No, it does not work: http://jsfiddle.net/JLjjK/203/ – Alex Dec 08 '13 at 21:01
@Alex It is working correctly. You might want to try `vertical-align:top` so that they both are aligned to the top. http://jsfiddle.net/JLjjK/204/ – Alex W Dec 09 '13 at 00:01
@Alex W Good but still not perfect: http://jsfiddle.net/JLjjK/207/ – Alex Dec 09 '13 at 08:43
@Alex The `img` is overflowing its container `div` because the width is set to `35%` on the `div`. There's lots of ways to fix it, but I don't know which one is right for your situation. You could do `overflow: hidden` on the `div`. You could add a class to `div` elements containing images and set them to `display: block`. What is the expected behavior? – Alex W Dec 12 '13 at 16:20
@Alex W I suppose the expected behaviour is to make the left container fit its content. Bringing any "X% constraint" here does not seem right to me. – Alex Dec 19 '13 at 07:17
@Alex Setting `max-width:100%` on your `img` element will keep it responsive within that `div`. The reason there is a `width` on the `div` elements is because when you set them to `inline-block` their width changes to fit their contents. If your content is super long it will make them behave as though they are set to `display:block` (i.e. pushing the divs that follow to the next line). – Alex W Dec 19 '13 at 13:26
this does NOT center the inner DIVs at all. the left hand one is right justified and the right hand one is left justified! Look closely at the JSFiddle. – MC9000 Jun 25 '19 at 05:55

JAB · Answer 2 · 2012-08-01T18:15:50.310

2

Try this:

HTML:

<div id="container">
    <div id="box1" class="inlined">
        <div id="box3"></div>
        <div id="box4"></div>
    </div>
    <div id="box2" class="inlined"></div>
</div>

CSS:

.inlined
{
    display: inline-block;
}

You could also use .inlined { float: left; } or .inlined { float: right; }, but those can have unexpected behavior depending on the surrounding elements.

edited Aug 01 '12 at 18:15

answered Aug 01 '12 at 18:03

JAB

20,783
6
71
80

I tried implementing this, but it does not work. http://jsfiddle.net/hdk5e/ – Bruno Bronosky Dec 09 '13 at 23:27
@RichardBronosky That fiddle works for me. If it's the centering, I didn't center the outer div because doing so wasn't related to having the two inner divs side by side (but not the innermost level of div nesting, to show that those still stack). Or were you referring to the fact that the middles of the two side-by-side divs do not line up, and instead it's the bottoms that are aligned? – JAB Dec 10 '13 at 20:02
Okay, I was confused. Thanks for the clarity. I was expecting the content of the "inlined" boxed to be aligned horizontally, not the "inlined" boxes themselves. This makes it more clear to me. http://jsfiddle.net/hdk5e/1/ – Bruno Bronosky Dec 10 '13 at 20:48
Oh, I see. One of the reasons I did not align the content of the "inlined" boxes was because in the question, fogsy mentioned boxes 1 and 2 being side by side but not boxes 3 and 4, but I can understand why that might confuse people. – JAB Dec 10 '13 at 21:30

150GritSandpaper · Answer 3 · 2012-08-01T18:43:21.647

I hope this is what you are looking for...

<style type="text/css">
.container{
    margin-left: auto;
    margin-right: auto;
    width: 300px;
}
.box1, .box2 {
    width:280px;
    height:auto;
    float:left;
    margin-bottom:10px;
    padding:10px;
    border:1px solid #888;
}
.box1 {
    clear:left;
    margin-right:10px;
}
.clear {
    clear:both;
}
</style>



<div id="container">
    <div class="box1">
       Enter box 1 content here.
    </div>
    <div class="box2">
       Enter box 2 content here.
    </div>
    <div class="clear"></div>
</div>

align 2 divs horizontally inside a third container div

3 Answers3

Linked