Align divs side-by-side (height not fixed)

Question

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 .

As per my example, here: http://jsfiddle.net/uBn5Z/

I am trying to remove the space/gap that appears because the two are not aligned. In the example, there is space below the 'number of posts' and 'joined date' (in the left column). This might be because of widths being specified not equalling the total width when padding and margins are considered (although I have looked into that possibility).

The height of the signature area is not something that is predetermined. Ideally I would like to do this without jquery calculating the height (and then using a minus positioning value).

<div class="wrap" id="post_1">
<div id="container2">
    <div id="container1">
        <div id="col1">
            <!-- col1 content -->
        </div>
        <div id="col2">
            <!-- col2 content -->
        </div>
        <!-- The item here needs to be aligned to the bottom in relation to itself and also col1 -->
    </div>
</div>

Answer 1

Tell me if you searched this work to the signature

 .wrap { width:950px; clear:both; font-family:"Segoe UI", "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif; font-size:13px } #container2 { clear:left; float:left; width:100%; overflow:hidden; background-color:#EBF0F5; border-right:1px solid #9AB2D0; border-left:1px solid #9AB2D0; border-top:1px solid #9AB2D0 } a.counter:link, a.counter:visited, a.counter:active { color:#1C66AB; text-decoration:none; font-family:"Segoe UI", "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif; font-size:13px; font-weight:400 } a.counter:hover { text-decoration:underline } .icons { text-align:right; border-bottom:1px solid #CBCBCB; padding:5px 4px 8px 0; margin-bottom:9px } #container1 { float:left; width:100%; border-left:1px solid #9AB2D0; position:relative; right:-170px; background-color:#fff } #col1 { float:left; width:170px; position:relative; left:-170px; overflow:hidden } #col2 { float:left; width:766px; position:relative; left:-170px; overflow:inherit } div#form-wrapper { font-family:"Segoe UI", "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif; position:absolute; top:0; right:0; left:0; bottom:0; padding-top:45px; padding-bottom:20px; vertical-align:top; clear:both } .profiletext { padding:10px 0 0; font-family:'Trebuchet MS', Helvetica, Arial, sans-serif; font-size:13px; font-weight:700 } .usertitle { font-family:'Trebuchet MS', Helvetica, Arial, sans-serif; font-size:13px; font-weight:600 } .colmask { position:relative; clear:both; float:left; background-color:#fff; font-size:13px; font-family:"Segoe UI", "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif; width:952px; overflow:hidden } .gilead-right { padding:9px 12px 12px 11px; font-size:13px; position:relative; line-height:21px } .gilead-left { padding:10px 10px 7px 12px } .body-message { word-wrap: break-word; padding-bottom:9px; padding-right:6px } .body-message img { max-width:750px } .wrap .icons input { width:13px; height:14px; margin:0 0 0 3px; vertical-align:middle; position:relative; top:-3px; *overflow:hidden } 

 <div class="wrap" id="post_1"> <div id="container2" style="float:left;"> <div id="container1"> <div id="col1"> <div style="min-height: 140px; padding: 8px 0px 0px 9px;"> <span class="profiletext"><strong><a href="/"><span style="font-weight: bold; color: #4B71A0;">User One</span> </a> </strong> </span> <br> <span class="usertitle">This is a usertitle</span> <br> <div style="padding-top: 8px;"> <img src="" alt="" title="" width="150" height="20"> <br> </div> <div style="padding-top: 7px;"> <a href=""><img src="" alt="" width="150" height="150"></a> </div> <span style="color: #8C8C8C; line-height: 19px;"> <div style="font-size: 12px; padding: 10px 0px 0px 0px;"> Posts: 12,047<br> Joined: November 2003 <br><br></div> </span> </div> </div> <div id="col2"> <div style="width: 100%; font-size: 100%; line-height: 20px; padding: 0px 12px 12px 13px;"> <div class="icons"> <div style="color: #8C8C8C; float: left; padding-top: 5px;">01-01-2013 00:00 AM <span class="smalltext"><strong><a href="" class="counter">#1</a></strong></span> </div> <div style="padding-top: 2px;">This space is intended for buttons and tools</div> </div> <div class="body-message">This is an example sentence. This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence.This is an example sentence. </div> </div> </div> <div style="clear:both"></div> <hr size="1" align="left" width="100%" style="margin-left: 13px; background-color: #CBCBCB;"> <div style="width: 750px; line-height: 1.5; padding: 0px 0px 8px 13px;"> <span style="word-wrap: break-word; bottom: 0; left: 0;"> <span style="color: #666666; padding-top: 4px;">Test signature. </span> </span> </div> 

I put a clear:both before your signature.

Answer 2

Here is my solution: http://jsfiddle.net/v5gKJ/2/ .

I have used a bit of jquery to make the height of your two columns equal based on which is biggest.

if ($("#col1").height()<=$("#col2").height()) 
{
    $("#col1").height($("#col2").height());
}

else
{
    $("#col2").height($("#col1").height());

Then I used absolute positioning to stick your userinfo and signatures to the bottoms of their respective columns.

#col1 {
    position: relative;
}

.userinfo {
    position: absolute;
    bottom: 0;
}

There are two additional bits of jquery which make room for your .userinfo and .signature but these can be removed if you will always know the heights of these elements.

Edit: I have just realised that you did not want to query the height of the element which I have done, so I am sorry. This was the least hacky way I could find.

Let me know what you think.

Answer 3

Use Jquery

var blogHeight = $('.blog-single-post').height();
$('.right-sidebar').css('height',blogHeight);