width 100% en divs

charlyta · #1 (**permalink**) 26/05/2010, 11:29

Hola! tal vez esto pueda solucionar mi post anterior. Perdonad, pero no sabía cambiar el título al post anterior. El tema es que no sé porqué los divs no se quedan al 25% para llenarme la pantalla... el div negro se queda mal...

Gracias!!

css

Código HTML:

#pies {  width:100%; height:4px; padding:0px; background-color:#fff; border:0px; margin: -50px auto 0 auto;

}
#azul { background-color:#00aeef; color:#FFF; width:25%; height:2px; float:left; padding:0px; margin:auto
	
	
}
#amarillo{ background-color:#fff200; color:#FFF; width:25%; height:2px; float:left; padding:0px; margin:auto
	
	
}

#magenta { background-color:#ec028c; color:#FFF; width:25%; height:2px; float:left; padding:0px; margin:auto
	
}
#negro { background-color:#000; color:#FFF; width:25%; height:2px; float:right;  padding:0px; margin:auto
	

}

y el html

Código HTML:

<div id="footer">

<div id="pies">
<div id="azul"></div>
<div id="amarillo"></div>
<div id="magenta"></div>
<div id="negro"></div>

</div>
</div>

DragonX · #2 (**permalink**) 26/05/2010, 12:17

en lugar de 25% a cada uno ponele 20% y fijate!

charlyta · #3 (**permalink**) 26/05/2010, 12:25

pues no funciona.... sé que en diferentes navegadores se midifica el tamaño, pero con width 100% tambien?

DragonX · #4 (**permalink**) 26/05/2010, 12:29

probá con este código:

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style>
      #pies {  width:100%; height:4px; padding:0px; background-color:#fff; border:0px;}
      #azul { background-color:#00aeef; color:#FFF; width:25%; height:2px; float:left;}
      #amarillo{ background-color:#fff200; color:#FFF; width:25%; height:2px; float:left;}
      #magenta { background-color:#ec028c; color:#FFF; width:25%; height:2px; float:left;}
      #negro { background-color:#000; color:#FFF; width:25%; height:2px; float:right;}
    </style>
  </head>
  <body>
    <div id="footer">
      <div id="pies">
        <div id="azul">&nbsp;</div>
        <div id="amarillo">&nbsp;</div>
        <div id="magenta">&nbsp;</div>
        <div id="negro">&nbsp;</div>
      </div>
    </div>
  </body>
</html>

no dejes los DIV´s vacios

charlyta · #5 (**permalink**) 26/05/2010, 12:35

hola! pues todavía no...

DragonX · #6 (**permalink**) 26/05/2010, 12:38

Algo mal debes estar haciendo porque yo probe eso y anda perfectamente