Friday, August 13, 2010

Make leftnav stay same height as right side of page

One of my biggest challenges on our first site we redesigned was how to make the leftnav always stay the same length as the right side of the page. On top of it, it has to have a background image that repeated all the way down the leftside. So here is the trick on how to make the leftside stay the same length as the right side. Yes this uses a table, but was the only idea i could come up with at the time. Anyone has suggestions let me know!

<table>
<tr>
<td style="background-image: url(some image);background-repeat: repeat-y;">
This is the left nav
</td>
<td>
This is the right side
</td>
</tr>
</table>

  • By having it in a table the leftnav will always go the same length as the right side and image will repeat untill it hits the bottom of the right side.