How can I align two divs horizontally?
HtmlCssHtml Problem Overview
I need to align two divs next to each other, so that each contains a title and a list of items, similar to:
<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>
It's remarkably easy to do with tables, but I don't want to use tables. How can I achieve this?
Html Solutions
Solution 1 - Html
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>
Solution 2 - Html
Nowadays, we could use some flexbox to align those divs.
.container {
display: flex;
}
<div class="container">
<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>
Solution 3 - Html
<div>
<div style="float:left;width:45%;" >
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div style="float:right;width:45%;">
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div style="clear:both; font-size:1px;"></div>
</div>
Clear must be used so as to prevent the float bug (height warping of outer Div).
style="clear:both; font-size:1px;
Solution 4 - Html
You need to float the divs in required direction eg left or right.
Solution 5 - Html
Wrap them both in a container like so:
.container{
float:left;
width:100%;
}
.container div{
float:left;
}
<div class='container'>
<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>
Solution 6 - Html
Add a class to each of the divs:
.source, .destination {
float: left;
width: 48%;
margin: 0;
padding: 0;
}
.source {
margin-right: 4%;
}
<div class="source">
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div class="destination">
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
That's a generic percentages solution - using pixel-based widths is usually much more reliable. You'll probably want to change the various margin/padding sizes too.
You can also optionally wrap the HTML in a container div, and use this CSS:
.container {
overflow: hidden;
}
This will ensure subsequent content does not wrap around the floated elements.
Solution 7 - Html
float is obsolete, better use display: flex;:
example :
.parent-div{ display: flex; }
indicate the direction by flex-direction: row/column;.
go down if no space by flex-wrap: wrap/nowrap;
more properties here.
Solution 8 - Html
if you have two divs, you can use this to align the divs next to each other in the same row:
#keyword {
float:left;
margin-left:250px;
position:absolute;
}
#bar {
text-align:center;
}
<div id="keyword">
Keywords:
</div>
<div id="bar">
<input type = textbox name ="keywords" value="" onSubmit="search()" maxlength=40>
<input type = button name="go" Value="Go ahead and find" onClick="search()">
</div>
Solution 9 - Html
<html>
<head>
<style type="text/css">
#floatingDivs{float:left;}
</style>
</head>
<body>
<div id="floatingDivs">
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div id="floatingDivs">
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</body>
</html>
Solution 10 - Html
For your purpose, I'd prefer using position instead of floating:
http://jsfiddle.net/aas7w0tw/1/
Use a parent with relative position:
position: relative;
And children in absolute position:
position: absolute;
In bonus, you can better drive the dimensions of your components.