The following problems occur because the height of my container is not pre-determined - it can vary, and is unknown. I have experimented using query to sort out positioning, but there are two reasons I do not wish to use jquery: this layout would be repeated multiple times on a single page, so I am concerned about, one, page loading times, and two, unique ids (if I reference a class or ID, it would occur multiple times on one page).
How can I align two elements side by side? I have a column layout. The column on the left requiring items to be aligned to the top, and the column on the right requiring items to be aligned to the bottom.
In my example above, I am trying to remove the space that appears below the content in the left column. I want the ‘signature’ item to be horizontally aligned with the bottom of the content in the left column. The gap should be removed. I thought this might be because of widths being specified not equalling the total width when padding and margins are considered, therefore the item being ‘pushed down’. Although I have looked into that possibility, it could still be true.
In another example, you can see I have managed to align the ‘signature’ to the bottom, however there is overlap between the content: http://jsfiddle.net/uBn5Z/6/ (I have tried using ‘clear: both’, but it didn’t work)
The examples above are what I have been able to achieve. Here is an mock-up of what I want to achieve:
You would need to preserve the space at the bottom of the content with some padding equal to the height of the signature then you could either absolutely place the signature into place or use negative margins.
I’d do something like this if you need the equal column effect.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.page-wrap {
width:960px;
margin:0 auto 20px;
}
.post-wrap {
margin:20px auto 0;
border:1px solid #9ab2d0;
background:#fff;
}
.post {
border-left:170px solid #EBF0F5;
zoom:1.0;
}
.post:after {
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
}
.post-info {
float:left;
width:160px;
padding:5px;
position:relative;
margin-left:-170px;
border-right:1px solid #9ab2d0;
}
.post-content {
float:left;
width:756px;
padding:5px;
margin-left:-1px;
border-left:1px solid #9ab2d0;
padding-bottom:35px;/* preserve space for footer */
}
.post-foot {
float:left;
clear:both;
width:756px;
padding:5px;
height:25px;
margin:-35px 0 0 180px;
border-top:1px solid #9ab2d0;
display:inline;/* ie6 fix*/
}
</style>
</head>
<body>
<div class="page-wrap">
<div class="post-wrap">
<div class="post">
<div class="post-info">
<p><a href="#">User info</a></p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div class="post-content">
<p>Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here </p>
</div>
</div>
</div>
<div class="post-foot">Test signature</div>
<!-- end post -->
<div class="post-wrap">
<div class="post">
<div class="post-info">
<p><a href="#">User info</a></p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div class="post-content">
<p>Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here </p>
<p>Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here </p>
<p>Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here </p>
<p>Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here </p>
<p>Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here </p>
<p>Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here </p>
<p>Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here </p>
<p>Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here </p>
</div>
</div>
</div>
<div class="post-foot">Test signature</div>
<!-- end post -->
</div>
<!-- end page-wrap -->
</body>
</html>
You’d need to ensure that the signature remains at a fixed height.
You could also do something similar using display:table-cell (for ie8+).