Problema com Justiticar colunas <DIV>

[reredias 0]

Estou criando um layout com 3 colunas usando DIV no html:

 

CODE

<div id="left"></div>

<div id="center"></div>

<div id="right"></div>

 

O "left" e "right" tem 10px (cada)

 

Porém, quando coloco "width:100%" no "center", ele extrapola ao invés de justificar, jogando o "right" pra linha de baixo:

 

CODE

#left {

float:left;

width:10px;

height:10px;

background: url(square_left.png) no-repeat;

}

#center {

float:left;

width:100%;

height:10px;

background-image: url(square_center.png);

background-repeat: repeat-x;

}

#right {

float:right;

width:10px;

height:10px;

background: url(square_right.png) no-repeat;

}

 

O que estou fazendo errado?

[brcontainer 16]

simplismente 100% não se aplica assim

 

o certo para layout liquidos é isso

<style>
#left {
float:left;
width:10px;
height:10px;
background: url(square_left.png) no-repeat;
}
#center {
margin: 0 10px;
display:block;
height:10px;
background: url(square_center.png) repeat-x;
}
#right {
float:right;
width:10px;
height:10px;
background: url(square_right.png) no-repeat;
}
</style>
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>

observe mo CEnTER vai depois de left e right ;)

[micox 2]

observe mo CEnTER vai depois de left e right

E que, no center, o margin-left é igual à largura da div left e o margin-right é igual à largura da div right.

Isso é pra dar espaço e não irem pra baixo.