Hey, im working on my first CSS layout... im loving it so far, but i do have two problems...

My first problem is that, for the layout i am working on, i need the sidebar and content "boxes" (not sure what you call them) to expand at the same time (ie if i put a million BRs in the sidebar the content will expand to meet it and vice versa). I'm sure its either impossible or very simple but i just havent figured it out...

My second problem is that, for some reason, when i type in my "boxes" the text expands the box rather than wordwrapping to the next line... again, this is probably very simple but i havent been able to figure it out... well heres my CSS thing anyways if it will help...

<style type="text/css">

body
{
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;

background: #dddddd;
color: #000000;
}

#top
{
height: 110px;
width: 650px;

border-right-width: 1px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
border-style: solid;

background: #437299;
color: #000000;
}

#sidebar
{
width: 150px;
height: 100px;

border-right-width: 0px;
border-left-width: 0px;
border-top-width: 1px;
border-bottom-width: 1px;
border-style: solid;

background: #dddddd;

font-family: verdana;
font-size: 13px;
color: #000000;
}

#content
{
position: absolute;
left: 150px;
top: 110px;

width: 500px;
height: 100px;

border-right-width: 1px;
border-left-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;
border-style: solid;

background: #FFFFFF;
color: #000000;
}

#top2
{
height: 10px;
width: 100%;

border-right-width: 0px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 1px;
border-style: solid;

background: #5599cc;
color: #000000;
}

#bottom2
{
position: absolute;
left: 0px;
bottom: 0px;

width: 100%;
height: 15px;

border-right-width: 0px;
border-left-width: 0px;
border-top-width: 1px;
border-bottom-width: 0px;
border-style: solid;

background: #5599cc;
color: #000000;
}

#bottom
{
width: 650px;
height: 15px;

border-right-width: 1px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 1px;
border-style: solid;

background: #437299;
color: #000000;
}

A:link
{
text-decoration: none;
color: #437299;
background: none;
}

A:visited
{
text-decoration: none;
color: #437299;
background: none;
}

A:active
{
text-decoration: none;
color: #437299;
background: none;
}

A:hover
{
text-decoration: none;
color: #5599cc;
background: none;
}

</style>

Thanks in advance for any help!

for your second problem: is what your putting in the box really long, without any breaks? if you just type normally, it will wrap to the next line and keep the dimensions that you specify. but if you put one really long word in, without any spaces in it, it will expand to fit the longest thing inside it.