How to Place Two Divs Next to Each Other

How to place two divs next to each other?

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

How to align two div next to each other

Change the <div> to <span> and you'll save on lots of CSS:

.helpText {  margin-right: 10px;}
.help-block {  overflow: auto;  float: right;}

<div class="help-block">  <span class="helpText">Some text</span>  <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">Buttom</button></div>

How to keep two div next to each other?

There are two issues here:

You need to set a box-sizing so that the width of the element includes the border
You need to remove the newline between the divs since it takes an extra space

div{
  border: 1px solid;
  display: inline-block;
  box-sizing: border-box;
  width: 50%;
}

<form>
  <div>
    two
  </div><!-- you need to remove space here --><div>
    one
  </div>
</form>

CSS two divs next to each other

You can use flexbox to lay out your items:

#parent {  display: flex;}#narrow {  width: 200px;  background: lightblue;  /* Just so it's visible */}#wide {  flex: 1;  /* Grow to rest of container */  background: lightgreen;  /* Just so it's visible */}

<div id="parent">  <div id="wide">Wide (rest of width)</div>  <div id="narrow">Narrow (200px)</div></div>

How to place two divs next to each other?

Your border overflows here.

Try setting box-sizing: border-box to both divs:

#video{

    width: 50%;
    height: 100%;
    border-style: solid;
    float: left;
    box-sizing: border-box;
}
#chat{

    width: 50%;
    height: 100%;
    border-style: solid;
    float: left;
    box-sizing: border-box;
}

How to place two divs next to each other within another div using css?

You just need to tell the parent div how to lay its children out. I see you are using flex already on the button. Just use it on Wrapper

Const Wrapper = styled.div`
  display: flex;
  justify-content: space-between;
  /* ... rest of your styles here */
`

Here's an example of it live

How to Place Two Divs Next to Each Other

How to place two divs next to each other?

How to align two div next to each other

How to keep two div next to each other?

CSS two divs next to each other

How to place two divs next to each other?

How to place two divs next to each other within another div using css?

Related Topics

Leave a reply