imagen dividida

[konoyek]

hola a todos quisiera saber como puedo dividir una imagen para la cual mostrarla como background

pense realizar lo siguiente:

#header1 {
background: url(images/bgheader1.jpg) no-repeat;
padding:0px 0px 0px 0px;
height:162px;
margin:0px 0px 0px 80px;}
#header2 { background: url(images/bgheader2.jpg);
padding:0px 0px 0px 0px;
height:162px;
margin:0px 0px 0px 80px;

}
#header3 { background: url(images/bgheader3.jpg);
padding:0px 0px 0px 0px;
height:162px;
margin:0px 0px 0px 80px;

}




<div id="header2">
</div>


<div id="header3">

</div>

el problema es que las imagenes no me quedan de forma seguida sino una debajo de la otra me gustaria como podria solucionar este inconveniente sin necesidad de utilizar tablas

[pyroCL]

en
header 2 pone float:left
y en header 3 float:right
asi te queda una al lado de la otra

y podría tambien hacer un div que contenga los header...

Saludos

[konoyek]

mira las imagenes las tengo de la siguiente manera:

Código HTML:

#header1 { 
background: url(images/bgheader1.jpg) no-repeat;
padding:0px 0px 0px 0px;
height:162px;
margin:0px 0px 0px 0px;
float:left;}

#header2 { background: url(images/bgheader2.jpg) no-repeat;
padding:0px 0px 0px 0px;
height:162px;
margin:0px 0px 0px 70px;
float:none;

 }
#header3 { background: url(images/bgheader3.jpg); 
padding:0px 0px 0px 0px;
height:162px;
margin:0px 0px 0px 580px;


 }


<div id="header1">

</div>


<div id="header2">
</div>


<div id="header3">

</div>

el problema es en l tercera imagen ya que cuando le coloco float desaparece, y si no le dejo nada sigue aun debajo de las 2 imagenes

[pyroCL]

Mira lo que podrias hacer es un div que contenga las tres imagenes.
Pensemos que cada imagen tiene un ancho de 100px y un alto de 162 px

Código HTML:

#contenedor    
{           
width:300px;
height:162px;
text-align:center;
}


#header1 { 
background: url(images/bgheader1.jpg) no-repeat;
padding:0px 0px 0px 0px;
height:162px;
width:100px;
margin:0px 0px 0px 0px;
float:left;}

#header2 { background: url(images/bgheader2.jpg) no-repeat;
padding:0px 0px 0px 0px;
height:162px;
width:100px;
margin:0px 0px 0px 70px;
float:right;

 }
#header3 { background: url(images/bgheader3.jpg); 
padding:0px 0px 0px 0px;
height:162px;
width:100px;
margin:0px 0px 0px 580px;
float:right;

 }

<div id="contenedor">

   <div id="header1">

   </div>


   <div id="header2">
   </div>


   <div id="header3">

   </div>

</div> 

Prueba eso. Espero te sirva.

Saludos!