How to place two divs next to each other?

css html

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

Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.

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.

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: stackoverflow.com/questions/446060/…

#wrapper { display: flex; }

Possible duplicate of CSS two divs next to each other

Roy

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 */
}

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)

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

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 ?

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

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

Vega

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

The two divs are

next to each other.

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

The two divs are

next to each other.

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.

This solution has one annoying issue: since divs 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: you can't manage to keep both divs on the same line unless you put theirs tags without anything in between.

James

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.

Md Rafee

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

Jako Basson

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.)

meo

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/

Thanks. If I omit overflow: auto; it still works. Could you give an example where it is required ?

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: jsfiddle.net/dqC8t/3

OK, I see, thanks! However, I didn't like margin: 0 0 0 302px; because it depends on width: 300px;. But, thanks anyway!!

you dont need it if you specify i width for your second div

NotAFlyingGoose

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

Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.

or the easy way

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

Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.

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.

m4n0

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

Martin Krajčírovič

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

Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.

Elshan

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

sNICkerssss

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

Clean and simple.

Chukwu3meka

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>

Akshit Ahuja

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

Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.

How to place two divs next to each other?

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US