How to Align Two Divs Horizontally

How can I align two divs horizontally?

Float the divs in a parent container, and style it like so:

.aParent div {    float: left;    clear: none; }

<div class="aParent">    <div>        <span>source list</span>        <select size="10">            <option />            <option />            <option />        </select>    </div>    <div>        <span>destination list</span>        <select size="10">            <option />            <option />            <option />        </select>    </div></div>

horizontally aligning multiple divs (CSS)

You can use the incredible property box-sizing: border-box; supported by all modern browser, IE8 included!
And set the width and margin on % :

.red, .blue {
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

.red {
    width:650px;
    height:1000px;
    background:red;
    padding: 1% 0 0 1%; // Space top and left of red
}

.blue {
    height:200px;
    width: 24%;
    background:blue;
    display:inline-block;
    float: left;
    margin: 0 1% 1% 0; // Space bottom and right of each blue
}

http://jsfiddle.net/Pik_at/L7qpgdkk/3/

How do I align two divs horizontally without the left one floating left?

You can also use display:inline-block; on your child elements. View this Fiddle for an example of how to accomplish this.

HTML:

<div class="centerpanel">
<div class="leftpanel">Left</div><div class="rightpanel">Right</div>
</div>

CSS:

div.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
.leftpanel {
background:red;
display:inline-block;
width:50%;
}
.rightpanel {
background:blue;
display:inline-block;
width:50%;
}

How to align two divs horizontally and force the contents to be inside the divs

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1">        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>      </head>
<body><div class="container-fluid">       <div class="row">        <div class="col-2" style="background-color: #004E87;height:100vh">              </div>        <div class="col" >          <div class="row" style="background-color: yellow">            <div class = "col">            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            <div>          <div>        </div>        </div>        </div>   </div>
<script type="text/javascript"> 
</script>
</body></html>

CSS horizontally align two divs with different height

Try this with flexbox.

JSfiddle. CanIUse.com

#wrapper {  border: 1px solid black;  display: flex;}
#square {  min-width: 50px;  height: 50px;  border: 1px solid blue;}
#box {  border: 1px solid red;}

<div id="wrapper">  <div id="square"></div>  <div id="box">Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text </div></div>

Align two divs horizontally (one on extreme left and the other on extreme right of container)

display:inline-block will not create a float issue so there is no need to add clearfix
you can also use overflow:hidden instead of display:inline-block

.header {  display: inline-block;   width: 100%;  border: 1px solid red;}.playerOne {  float: right;}.playerTwo {  float: left;}

<div class="header">  <div class="playerOne">    Oli  </div>  <div class="playerTwo">    Matt  </div></div>

How to align two divs horizontally inline in a div container?

Since you have 3 div but a last one unseen, display:inline-block + text-align:justify is just fine for the result you look for. DEMO