WN - Problem med CSS

Hejsan,

Jag har hållit på och tråcklat ett par timmar nu med ett (vad jag tror) nybörjarproblem med CSS.

Följande sida är det det gäller:

http://194.236.5.87/test/index.asp

Här ser det fint ut men om man sedan fyller på med text som här så följer inte sidlinjerna med ner:

http://194.236.5.87/test/index2.asp

Jag vill att sidlinjerna på rutan ("line_left" och "line_right") följer med texten ner när det fylls på med text i "main". Det är det jag inte kommer på hur man gör. Jag vill att "line_left" och "line_right" hela tiden ska vara lika höga som "all". Dessutom vill jag ha allting centrerat. Någon som har nån idé på hur man löser det?

Kod på sidan:

Kod:

<div id="line_top"></div>

<div id="line_left"></div>



<div id="all">

<div id="logo"></div>

<div id="main">

TextTextTextTextText

</div>

</div>



<div id="line_right"></div>

<div id="line_bottom"></div>

</div>

CSS:

Kod:

<STYLE>

BODY

{

  BACKGROUND-COLOR: #aeaeae

}

#line_left

{

  FONT-SIZE: 0px;

  FLOAT: left;

  BACKGROUND-IMAGE: url(img/line_left.gif);

  WIDTH: 6px;

  HEIGHT: 50%

}

#line_right

{

  FONT-SIZE: 0px;

  FLOAT: left;

  BACKGROUND-IMAGE: url(img/line_right.gif);

  WIDTH: 6px;

  HEIGHT: 50%

}

#logo

{

  PADDING-LEFT: 20px;

  FLOAT: left;

  PADDING-BOTTOM: 10px;

  WIDTH: 703px;

  PADDING-TOP: 10px;

  HEIGHT: 70px;

  BACKGROUND-COLOR: white

}

#line_bottom

{

  FONT-SIZE: 0px;

  BACKGROUND-IMAGE: url(img/line_bottom.gif);

  WIDTH: 715px;

  HEIGHT: 7px

}

#line_top

{

  FONT-SIZE: 0px;

  BACKGROUND-IMAGE: url(img/line_top.gif);

  WIDTH: 715px;

  HEIGHT: 7px

}

#all

{

  FLOAT: left;

  WIDTH: 703px;

  HEIGHT: 50%;

  BACKGROUND-COLOR: white

}

#main

{

  BACKGROUND-COLOR: white

}

</STYLE>