How to place two divs next to each other?

Question

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

I would like the two divs to be next to each other inside the wrapper div. In this case, the height of the green div should determine the height of the wrapper.

How could I achieve this via CSS ?

Also: http://stackoverflow.com/questions/446060/css-two-divs-next-to-each-other — radek, Jun 27 '11 at 16:58

score 523 · Accepted Answer · edited Jun 28 '21 at 05:52

523

Float one or both inner divs.

Floating one div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

or if you float both, you'll need to encourage the wrapper div to contain both the floated children, or it will think it's empty and not put the border around them

Floating both divs:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

edited Jun 28 '21 at 05:52

Roy

7,811
4
24
47

answered Apr 27 '11 at 11:07

clairesuzy

27,296
8
54
52

3

you could set `overflow:auto` on the #wrapper So the size would still adapt to the contents size. (Without the need of a clear:both element) – meo Apr 27 '11 at 11:09
yes in example one, if the #first is longer, you certainly could - containing floats 101 eh ;).. overflow hidden on the #second avoids the need to calculate a left margin though otherwise the solutions are basically the same – clairesuzy Apr 27 '11 at 11:28
3

Exactly! I don't want to calculate the margin. `overflow: hidden` does a great job here! However, it still kind of magic to me. I thought that `overflow: hidden` should **hide** the content if it doesn't fit its container. But, here the behavior is a bit different. Could you elaborate on that please ? – Misha Moroshko Apr 27 '11 at 11:37
5

the `overflow` property will clear floats both vertical and horizontal which is why in my first example, `#second` doesn't need a left margin, the overflow property works as long as it's value is not `visible`.. I prefer hidden to auto for those just in case scenarios so a scroll bar is not generated by accident (which auto will do).. either way there will be no content hidden a scenario like this as it will only be hidden if it goes outside your 500px width but as long as there's no height content will wrap within the width as normal.. no hiding ;) – clairesuzy Apr 27 '11 at 11:43
in some cases an unexpected element like a list for example, may have been set to 100% width and it's default padding still exists, that would make it bigger than the 100% of your next to floated container.. if you use auto you will get a horizontal scrollbar, if you use hidden it will clip.. it's preference really as either way shows that there's a width mismatch – clairesuzy Apr 27 '11 at 11:45
What do you mean by "the overflow property will clear floats both vertical and horizontal". Isn't `float` by definition floats only horizontally (left or right, but not up or down) ? Unfortunately, I still cannot figure out how `overflow: hidden` does the trick. The second div is still floats to the left, right ? – Misha Moroshko Apr 27 '11 at 12:25
1

overflow:hidden on the #wrapper serves to contain the #first float vertically should it get longer than the non-floated #second div. the second overflow on #second serves to contain the content next to the first float, horizontally otherwise it would go underneath the first float. The extended behaviour of the overflow property was phased in somewhere in CSS2.1, the specs themselves changed in response to a way to contain floats without a clearing element or a clearfix hack, it's technical term is that when used like this it creates a new block formatting context – clairesuzy Apr 27 '11 at 12:35
and for more information: there's a post [right here..](http://stackoverflow.com/questions/3956645/why-does-setting-overflow-alter-layout-of-child-elements) - and no in my first example the second div is not floating it purely relies on the overflow behaviour which means it takes the space left available to it, this can be seen by removing the overflow on the wrapper.. as long as #second is longest it will dictate the wrapper height which is what you asked for - i.e. the #wrapper only ignores the #first float ;) – clairesuzy Apr 27 '11 at 12:36
Float both is the easier of the two to remember (overflow hidden container, float all children), and can be used for more than 2 divs. – rybo111 Nov 02 '15 at 11:25
When people search how to have two blocks next to each other today, they still find that answer. But using float to achieve that isn't super relevant as of today. I know it's a very old answer but if you're still around, could you edit it to show the "flexbox" solution first, the "inline-block" solution second, and the "float" one last please? – Lily Bergonzat Jun 15 '19 at 16:38

score 170 · Answer 2 · edited Dec 30 '21 at 14:50

Having two divs, you could also use the display property:

#wrapper {
    border: 1px solid blue;
}
#div1 {
    display: inline-block;
    width:120px;
    height:120px;
    border: 1px solid red;
}
#div2 {
    display: inline-block;
    width:160px;
    height:160px;
    border: 1px solid green;
}

<div id="wrapper">
    <div id="div1">The two divs are</div>
    <div id="div2">next to each other.</div>
</div>

If div1 exceeds a certain height, div2 will be placed next to div1 at the bottom. To solve this, use vertical-align:top; on div2.

#wrapper {
    border: 1px solid blue;
}
#div1 {
    display: inline-block;
    width:120px;
    height:120px;
    border: 1px solid red;
}
#div2 {
    vertical-align:top;
    display: inline-block;
    width:160px;
    height:160px;
    border: 1px solid green;
}

<div id="wrapper">
    <div id="div1">The two divs are<br/><br/><br/><br/><br/><br/></div>
    <div id="div2">next to each other.</div>
</div>

jsFiddle for example 1.

jsFiddle for example 2.

@BSeven the accepted answer uses the float property, which was supported earlier than the display property by the major browsers. Chrome supports float from v1.0 and display from v4.0. Perhaps the accepted answer was more backwards-compatible at the time it was written. — jim_kastrin, May 27 '16 at 09:16
This solution has one annoying issue: since `div`s are made `inline` you have to keep no spaces, new lines etc between them in your HTML. Otherwise, browsers will render a space between them. See this [**Fiddle**](https://jsfiddle.net/AlexandrAbakumov/1n2a05ob/): you can't manage to keep both `div`s on the same line unless you put theirs tags without anything in between. — Alexander Abakumov, May 31 '16 at 16:31

score 39 · Answer 3 · answered Apr 27 '11 at 11:06

39

You can sit elements next to each other by using the CSS float property:

#first {
float: left;
}
#second {
float: left;
}

You'd need to make sure that the wrapper div allows for the floating in terms of width, and margins etc are set correctly.

answered Apr 27 '11 at 11:06

James

13,092
1
17
19

score 34 · Answer 4 · answered May 31 '16 at 03:48

Try to use flexbox model. It is easy and short to write.

Live Jsfiddle

CSS:

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

default direction is row. So, it aligns next to each other inside the #wrapper. But it is not supported IE9 or less than that versions

score 20 · Answer 5 · answered May 22 '15 at 08:31

Option 1

Use float:left on both div elements and set a % width for both div elements with a combined total width of 100%.

Use box-sizing: border-box; on the floating div elements. The value border-box forces the padding and borders into the width and height instead of expanding it.

Use clearfix on the <div id="wrapper"> to clear the floating child elements which will make the wrapper div scale to the correct height.

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

http://jsfiddle.net/dqC8t/3381/

Option 2

Use position:absolute on one element and a fixed width on the other element.

Add position:relative to <div id="wrapper"> element to make child elements absolutely position to the <div id="wrapper"> element.

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}
#first {
    border: 1px solid red;
    width:100px;
}
#second {
    border: 1px solid green;
    position:absolute;
    top:0;
    left:100px;
    right:0;
}

http://jsfiddle.net/dqC8t/3382/

Option 3

Use display:inline-block on both div elements and set a % width for both div elements with a combined total width of 100%.

And again (same as float:left example) use box-sizing: border-box; on the div elements. The value border-box forces the padding and borders into the width and height instead of expanding it.

NOTE: inline-block elements can have spacing issues as it is affected by spaces in HTML markup. More information here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}

#first {
    width:50%;
    border: 1px solid red;
    display:inline-block;
}

#second {
    width:50%;
    border: 1px solid green;
    display:inline-block;
}

http://jsfiddle.net/dqC8t/3383/

A final option would be to use the new display option named flex, but note that browser compatibility might come in to play:

http://caniuse.com/#feat=flexbox

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Agreed; `float` don't float my boat. `inline-block` rocks. (Sorry.) — SteveCinq, Mar 16 '17 at 02:41

meo · Answer 6 · 2011-04-27T11:17:04.420

17

here is the solution:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
}
#first {
    float: left;
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    margin: 0 0 0 302px; /* considering the border you need to use a margin so the content does not float under the first div*/
}

your demo updated;

http://jsfiddle.net/dqC8t/1/

edited Apr 27 '11 at 11:17

answered Apr 27 '11 at 11:11

meo

30,872
17
87
123

Thanks. If I omit `overflow: auto;` it still works. Could you give an example where it is required ? – Misha Moroshko Apr 27 '11 at 11:19
yes sure: remove the overflow auto and make the content of first longer then the content of second, you well see that the size of the container only adapts, when you set overflow auto on it, or if you use a clearing element: http://jsfiddle.net/dqC8t/3/ – meo Apr 27 '11 at 11:21
OK, I see, thanks! However, I didn't like `margin: 0 0 0 302px;` because it depends on `width: 300px;`. But, thanks anyway!! – Misha Moroshko Apr 27 '11 at 11:33
you dont need it if you specify i width for your second div – meo Apr 27 '11 at 12:57

score 10 · Answer 7 · answered Jun 13 '18 at 09:53

This is the right CSS3 answer. Hope this helps you somehow now :D I really recommend you to read the book: https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 Actually I have made this solution from reading this book now. :D

#wrapper{
  display: flex;
  flex-direction: row;
  border: 1px solid black;
}
#first{
  width: 300px;
  border: 1px solid red;
}
#second{
  border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

score 10 · Answer 8 · answered Sep 14 '18 at 15:26

It is very easy - you could do it the hard way

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

<div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

or the easy way

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

There's also like a million other ways.
But I'd just with the easy way. I would also like to tell you that a lot of the answers here are incorrect But both the ways that I have shown at least work in HTML 5.

score 9 · Answer 9 · edited Dec 10 '15 at 13:33

9

Try to use below code changes to place two divs in front of each other

#wrapper {
  width: 500px;
  border: 1px solid black;
  display:flex;
}

JSFiddle link

edited Dec 10 '15 at 13:33

m4n0

29,823
27
76
89

answered Dec 08 '15 at 13:30

Shailesh

133
1
3

score 7 · Answer 10 · edited Jun 16 '16 at 11:52

7

Add float:left; property in both divs.
Add display:inline-block; property.
Add display:flex; property in parent div.

edited Jun 16 '16 at 11:52

Elshan

7,339
4
71
106

answered Jun 16 '16 at 11:09

Friend

506
4
10

score 5 · Answer 11 · answered Nov 03 '19 at 10:17

5

My approach:

<div class="left">Left</div>
<div class="right">Right</div>

CSS:

.left {
    float: left;
    width: calc(100% - 200px);
    background: green;
}

.right {
    float: right;
    width: 200px;
    background: yellow;
}

answered Nov 03 '19 at 10:17

sNICkerssss

6,312
1
24
16

Clean and simple. – Beachhouse Oct 14 '20 at 13:29

score 1 · Answer 12 · answered Feb 22 '20 at 16:55

In material UI and react.js you can use the grid

<Grid
  container
  direction="row"
  justify="center"
  alignItems="center"
>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>

</Grid>

score 0 · Answer 13 · answered Oct 10 '16 at 10:30

#wrapper {
width: 1200;
border: 1px solid black;
position: relative;
float: left;
}
#first {
width: 300px;
border: 1px solid red;
position: relative;
float: left;
}
#second {
border: 1px solid green;
position: relative;
float: left;
width: 500px;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

How to place two divs next to each other?

13 Answers13

Linked

Related