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?
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.
Add a class to each of the divs:
.source, .destination {_x000D_
float: left;_x000D_
width: 48%;_x000D_
margin: 0;_x000D_
padding: 0;_x000D_
}_x000D_
.source {_x000D_
margin-right: 4%;_x000D_
}<div class="source">_x000D_
<span>source list</span>_x000D_
<select size="10">_x000D_
<option />_x000D_
<option />_x000D_
<option />_x000D_
</select>_x000D_
</div>_x000D_
<div class="destination">_x000D_
<span>destination list</span>_x000D_
<select size="10">_x000D_
<option />_x000D_
<option />_x000D_
<option />_x000D_
</select>_x000D_
</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.
<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>
Wrap them both in a container like so:
.container{ _x000D_
float:left; _x000D_
width:100%; _x000D_
}_x000D_
.container div{ _x000D_
float:left;_x000D_
}<div class='container'>_x000D_
<div>_x000D_
<span>source list</span>_x000D_
<select size="10">_x000D_
<option />_x000D_
<option />_x000D_
<option />_x000D_
</select>_x000D_
</div>_x000D_
<div>_x000D_
<span>destination list</span>_x000D_
<select size="10">_x000D_
<option />_x000D_
<option />_x000D_
<option />_x000D_
</select>_x000D_
</div>_x000D_
</div><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;
if you have two divs, you can use this to align the divs next to each other in the same row:
#keyword {_x000D_
float:left;_x000D_
margin-left:250px;_x000D_
position:absolute;_x000D_
}_x000D_
_x000D_
#bar {_x000D_
text-align:center;_x000D_
}<div id="keyword">_x000D_
Keywords:_x000D_
</div>_x000D_
<div id="bar">_x000D_
<input type = textbox name ="keywords" value="" onSubmit="search()" maxlength=40>_x000D_
<input type = button name="go" Value="Go ahead and find" onClick="search()">_x000D_
</div>Nowadays, we could use some flexbox to align those divs.
.container {_x000D_
display: flex;_x000D_
}<div class="container">_x000D_
<div>_x000D_
<span>source list</span>_x000D_
<select size="10">_x000D_
<option />_x000D_
<option />_x000D_
<option />_x000D_
</select>_x000D_
</div>_x000D_
_x000D_
<div>_x000D_
<span>destination list</span>_x000D_
<select size="10">_x000D_
<option />_x000D_
<option />_x000D_
<option />_x000D_
</select>_x000D_
</div>_x000D_
</div>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.
You need to float the divs in required direction eg left or right.
Source: Stackoverflow.com