Question

I have the html structure as below:

<div class="pagebody">
 <div class="pageleft">
      <div class="sidebarmenu">
      </div>
      <div class="sidebarbottom">
      </div>
 </div>   <!--  end pageleft  -->

 <div class="pageright">
      ...
      ...
      ...
 </div>   <!--  end pageright  -->

 <div class="clear"></div>

 </div>   <!--  end pagebody  -->

The CSS is

.pagebody {
width:960px;
text-align:left;
margin:0 auto;
}
.pageleft {
width:333px;
float:left;
position:relative;
padding:24px 0 0 37px;
min-height:100%;
height: auto !important;
height: 100%;
margin: 0 auto -301px;
}
.pageright {
width:590px;
float:right;
padding-top:29px;
min-height:1200px;
}
.sidebarmenu {
margin-right:72px;
font:15px Helvetica, Arial, sans-serif;
}
.sidebarbottom {
margin-left:10px;
position:absolute;
bottom:0;
    height:301px;
}

The ‘pageright’ content is not fixed in height and varies. I want to align the ‘sidebarbottom’ with the bottom of ‘pageright’. Tried with position absolute & relative but not working.

Any help?

Answer 1

I found the solution.

Below <div class=”pagebody”></div> there will be another repetition:-

<div class="pagebody">
  <div class="pageleft">
    <div class="sidebarmenu">
    </div>
  </div>   <!--  end pageleft  -->

  <div class="pageright">
  ...
  ...
  ...
  </div>   <!--  end pageright  -->

  <div class="clear"></div>

</div>   <!--  end pagebody (1) -->

<div class="pagebody">
  <div class="pageleft">
    <div class="sidebarbottom">
    </div>
  </div>   <!--  end pageleft  -->

  <div class="pageright">
   &nbsp;
  </div>   <!--  end pageright  -->

  <div class="clear"></div>

</div>   <!--  end pagebody (2) -->

This works!