|
| I have two blocks, one aligned to the left and one aligned to the right.
I'm having issues getting the left block aligned to the bottom when the
content height is less than that of the right block. How do I accomplish
this w/out using a table? Thanks. - PJ
<div class="clearfix">
<div class="floatleft">
<p>some text that I'd like bottom aligned with Link 3</p>
</div>
<div class="floatright">
<p><a href="#">Link 1</a></p>
<p><a href="#">Link 2</a></p>
<p><a href="#">Link 3</a></p>
</div>
</div>
..floatleft {
display: block;
float: left;
width: 45%;
}
..floatright {
display: block;
float: right;
width: 45%;
text-align: right;
}
/* Clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
..clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
..clearfix { display: block; }
/* End hide from IE-mac */
|
|