alinhamento de divs

[rockrgo 138]

Boa tarde pessoal...estou quebrando a cabeça para tentar alinhar umas divs para fazer um efeito abaixo do meu header mas não está rolando....ja tentei um float left e nada...

 

meu html está assim.

 

<div id="fade">
	<div id="fade-left"></div>
	<div id="fade-center"></div>
	<div id="fade-right"></div>
</div>

 

e meu css assim:

 

#fade{
	visibility: visible;
	width: 965px;
	min-height: 5px;
	position:relative;
}


#fade-left{
	width:100px;
	height: 29px;
	background-image: url("../images/fade_line.png");
	background-position: 0px 29px;

}

#fade-center{
	margin: 0px 100px;
	width:765px;
	height: 29px;
	background-image: url("../images/fade_line.png");
	background-position: 0px 58px;
}

#fade-right{
	width:100px;
	height: 29px;
	background-image: url("../images/fade_line.png");
	background-position: 100px 29px;
}

 

 

desta forma fica um embaixo do outro.

tentei um float left, mas só consegui alinhar a div left e center a right fica abaixo. o que estou fazendo de errado?

[Public2004 79]

"float:left;" em todas as div internas, mas para isso ter efeito a soma dos "widths + margins + paddings + borders" dos elementos não podem exceder a largura total da div pai. No seu exemplo a soma das larguras dos elementos é exatamente igual a largura da div principal, mas tem 200px de margem na div central.

 

Att.

[rockrgo 138]

"float:left;" em todas as div internas, mas para isso ter efeito a soma dos "widths + margins + paddings + borders" dos elementos não podem exceder a largura total da div pai. No seu exemplo a soma das larguras dos elementos é exatamente igual a largura da div principal, mas tem 200px de margem na div central.

 

Att.

era extamente isso o problema mas consegui resolver sem alterar as dimensões desta forma.

 

#fade{
	visibility: visible;
	width: 965px;
	min-height: 5px;
	position:relative;
}

#fade-left{
	width:100px;
	height: 29px;
	background-image: url("../images/fade_line.png");
	background-position: 0px 29px;
	float:left;
	position:relative;
}

#fade-center{
	margin: 0px 100px;
	width:765px;
	height: 29px;
	background-image: url("../images/fade_line.png");
	background-position: 0px 58px;
	float:left;
	position:absolute;
}

#fade-right{
	width:100px;
	height: 29px;
	background-image: url("../images/fade_line.png");
	background-position: 100px 29px;
	float:right;
	position:relative;
}

 

 

Obrigado pela ajuda.