Help with css, making a div by default be page length

Question

Can someone help me with the css on this page? http://www.thepatstudio.com/pat/

I have a sidebar that has a certain length with links to the rest of the page. Right next to that is an area for text and a background image. I want the whole div to be the same length as the sidebar if the text is too short, and longer with the image at the bottom if it's got more text. I'm trying to use height: 100% , but I can't seem to get it to work unless I make it > 100%, and then it doesn't update if the text is longer than that.

<div id="x">
<div id="sidebar">
<br>
<h2>Artist Info</h2><br>
<h2>Assemblage</h2><br>
<h2>Collage</h2><br>
<h2>Blog</h2><br>
<h2>Etsy</h2><br>
<h2>Guestbook</h2><br>
<h2>Studio</h2><br>
<h2>Contact</h2><br>
<h2>Links</h2><br>
<h2>Home</h2><br></div>
<div id="txt">
<div id="title"><h2 id ="ttext">Assemblage</h2></div>
<div id="text">texttext
</div>
</div>
</div>

#sidebar {background-color:#FFFFFF;width:158px;float:left}
#txt{background-color:#000000;width:770px;position:absolute;
right:328px;}
#title{background-color:#FFFFFF;position:relative;width:151px; margin-left: 25px;padding-left:10px;padding-right:10px;top:10px;height:45px;}
#text{background-color:#FFFFFF;position:relative;margin: 25px; padding: 20px }
#ttext {padding-top: 10px}
#x {height: 100%}

Answer 1

Try using some nifty javascript to dynamically adjust the height.

Here is a trivial example using jQuery (popular js framework)

<!-- loads the jquery lib, stick this in head

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;

<!--append this to the end of your script-->

<script type="text/javascript">

var sideBarHeight = $('#sidebar').height();

$('#text').height(sideBarHeight);

</script>

Answer 2

For starters you should not use the h2 tag repeatedly as an element for layout but are better off using the list elements as that is what they are for, while the header tags have specific meaning and ranking in the DOM.

I think to create your desired layout you should float the other elements within the main x element and make sure you clear the floats:

http://www.positioniseverything.net/easyclearing.html

You should not use absolute positioning on any of the elements so that they are contained within the same #x div