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 borderYou 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
Related Topics
How to Keep Two Divs on the Same Line
Formatting Numbers (Decimal Places, Thousands Separators, Localization, etc) With CSS
How to Change Whole Page Background-Color in Angular
How to Fade the Edge of a Div With Just CSS
Split Div into 2 Columns Using CSS
What Is the Way to Add Horizontal Scroll on Material-Ui Table With Many Columns
Family Tree With Pure HTML and CSS (Or With Minimal Js)
How to Use HTML to Print Header and Footer on Every Printed Page of a Document
Stretch Child Div Height to Fill Parent That Has Dynamic Height
Use CSS to Automatically Add 'Required Field' Asterisk to Form Inputs
Fullcalendar: Change the Color for Specific Days
Changing Angular Material Mat-Dialog-Content Styles
How to Set the Width of Select Box Options
How to Change the Symbol When Click in CSS
Make a Scrollbar Always Visible in a Div - Chrome
Align an Image and Some Text on the Same Line Without Using Div Width