Mee uitrekken

Als ik iets typ dat te lang is voor me vak, dan rekt hij niet mee uit,
hoe doe ik dat?
nu heb ik dit: http://paint-of-duty.nl/V2
Me CSS is:

background-image:url(images/bg.gif);
    margin:0;
    padding:0;
}
a {
font-family:Verdana; 
font-size:9pt; 
color:#162837; 
text-decoration: none;
}
#houder{
    width:900px;
    margin:50px auto;
}
#header{
    background-image:url(images/header.gif);
    width:745px;
    height:179px;
    margin-left:0px;
    margin-top:20px;
}
#menu{
    background-image:url(images/menu.gif);
    width:744px;
    height:30px;
    margin-left:0px;
    margin-top:0px;
}
#menu-left{
    background-image:url(images/menu-left.gif);
    width:168px;
    height:445px;
    margin-left:0px;
    margin-top:0px;
    float:left;
}
#content{
    background-image:url(images/content.gif);
    width:406px;
    height:445px;
    margin-left:0px;
    margin-top:0px;
    float:left;
}
#menu-right{
    background-image:url(images/menu-right.gif);
    width:171px;
    height:445px;
    margin-left:0px;
    margin-top:0px;
    float:left;
}
#home{
    background-image:url(images/home.gif);
    width:152px;
    height:47px;
    margin-left:5px;
    margin-top:10px;
}
#hometext{
    background-image:url(images/hometext.gif);
    width:152px;
    height:108px;
    margin-left:5px;
    margin-top:0px;
}
#partner{
    background-image:url(images/partner.gif);
    width:153px;
    height:43px;
    margin-left:5px;
    margin-top:10px;
}
#partnertext{
    background-image:url(images/partnertext.gif);
    width:155px;
    height:115px;
    margin-left:5px;
    margin-top:0px;
}
#login{
    background-image:url(images/login.gif);
    width:153px;
    height:47px;
    margin-left:5px;
    margin-top:10px;
}
#logintext{
    background-image:url(images/logintext.gif);
    width:153px;
    height:108px;
    margin-left:5px;
    margin-top:0px;
}
#info{
    background-image:url(images/info.gif);
    width:153px;
    height:43px;
    margin-left:5px;
    margin-top:10px;
}
#infotext{
    background-image:url(images/infotext.gif);
    width:153px;
    height:115px;
    margin-left:5px;
    margin-top:0px;
}

height:auto;

of
Height: 100%;

Hoe kan ik dan maken dat alles met elkaar uitrekt? want ik heb 3 plaatjes die helemaal schots en scheef staan op me site

om welke 3 divs gaat het in dit geval dan?

#menu-left,
#menu-right,
en #content

hmzz, oke
hoe ik dit zou doen:
CSS:

#content{
width:745px; background-image; url(images/afbeelding van je content over de gehele breedte); overflow: hidden;}

#menu-left{
    background-image:url(images/menu-left.gif);
    width:168px;
    margin-left:0px;
    margin-top:0px;
    float:left;
}
#content-mid{
    background-image:url(images/content.gif);
    width:406px;
    margin-left:0px;
    margin-top:0px;
    float:left;
}
#menu-right{
    background-image:url(images/menu-right.gif);
    width:171px;
    margin-left:0px;
    margin-top:0px;
    float:left;

html:

<div id="content">
 <div id="content-left">een div met een plaatje van je menutekst +tekst</div>
 <div id="content-mid">tekst</div>
 <div id="content-right">een div met een plaatje van je menutekst +tekst</div>
</div>

ps waarom heb je de "houder" op 900px staan als je layout maar 745 breed is?

weet eigenlijk niet ,
maar ik denk dat ik een andere layout ga maken, want het staat niet zo mooi om zo lang menu te hebben in 1 zo n klein vakje