Ah, the only way to center something vertically is with positioning. Even margins are odd when it comes to height. A margin of 50% will assume a 50% of the
width of the page even though it may be applied to top or bottom margin. Very odd.
Anyway, to get something absolutely positioned inside a div, add position: relative; to the outer div.
- Code: Select all
<div class="outer">
<div class="inner">
<p>content</p>
</div>
</div>
<style type="text/css">
.outer {
position: relative;
width: 500px;
height: 300px;
background: #333;
}
.inner {
position: absolute;
left: 100px;
top: 100px;
width: 300px;
height: 100px;
background: #aaa;
}
</style>