I seem to encounter situations where I need inline-block elements on opposite ends of the same "line" while also needing them to be vertically aligned.
Take a look at this example: http://jsfiddle.net/96DJv/4/ (focus on aligning the buttons with the heading)
This is the code snippet:
<div class="people">
<div class="head">
<div class="controls">
<button>Delete</button>
<select>
<option>Some Option</option>
</select>
<!-- other inline-block elements -->
</div>
<h1 class="title">Title</h1>
</div>
<table class="list">
<tr>
<th>Name</th><th>Age</th><th>Score</th>
</tr>
<tr>
<td>John</td><td>14</td><td>200</td>
</tr>
<tr>
<td>Jack</td><td>23</td><td>2100</td>
</tr>
</table>
</div>
The styling:
.people {
width: 400px;
}
.list {
width: 100%;
}
.list th {
text-align: left;
}
.title {
overflow:hidden;
}
.controls {
float: right;
}
.head {
background-color: #F1F1F1;
}
I've heard that floating an element removes the ability to adjust its vertical alignment. Is using position: absolute or tables my only options? Is there another way to achieve this?
I've been searching for a solution tirelessly but haven't found one yet.