realice un procedimiento errado

raulrivero · #1 (**permalink**) 01/04/2011, 12:39

trato de hacer una pagina con el texto en tres columnas y buscando encontre un codigo css que al provarlo funciona :
http://img854.imageshack.us/i/fotodepaginatrescolumna.jpg/
el codigo es este:

<html>
<head>
<title>columnas con div</title>
</head>
<body>

<h1> columnas con div</h1>
<div style="text-align:center;margin:0 auto;width:150%;">

<div style="width: 20%; float: left;margin:0px 15px 0px 15px;text-align:justify;">texto
<img src="piedra.jpg" width="700" style="margin: 5px 0px 5px 5px;float: left; " /></div>

<div style="width: 20%; float: left;margin:0px 50px 0px -300px;text-align:justify;">texto</div>

<div style="width: 20%; float: left;margin:0px 0px 0px 0px;text-align:justify;">texto </div>

<div style="clear: both;"/>
</div>

</body>
</html>

Entiendo q para ahorrar codigo ,css, permite poner todo el codigo en un archivo aparte y trate de convertir el anterior codigo css(<div style="width:....) de manera que pueda escribirse entre los heads y de funcionar, es facil llevar ese codigo css a un archivo de estencion .css .A continuacion lo que hice:

<html>
<head>
<title>columnas con div</title>
<style>
#style
{
text-align:center;margin:0 auto;width:150%;
}
#col 1
{
width: 20%; float: left;margin:0px 15px 0px 15px;text-align:justify;
}
#col 2
{
width: 20%; float: left;margin:0px 50px 0px -300px;text-align:justify;
}
#col 3
{
width: 20%; float: left;margin:0px 0px 0px 0px;text-align:justify;
}
#style both
{
clear: both;
}
</style>
</head>
<body>

<h1> columnas con div</h1>
<div id="style">
<div id="col 1">texto</div>
<div id="col 2">texto</div>
<div id="col 3">texto</div>
<div id="style both"></div>
</div>

</body>
</html>

actualizando:
http://img192.imageshack.us/i/fotodepaginatrescolumna.jpg/
podrian por favor ver si me equivoque de plano o si hay detalles en los que me equivoque .Saludos a todos.

laratik · #2 (**permalink**) 01/04/2011, 14:54

En un id

se dejan espacios, id="col 1" MAL, id="col1" BIEN, además si quieres reducir código puedes intentar unir selectores que comparten propiedades:

Código CSS:

Ver original#style
{
text-align:center;margin:0 auto;width:150%;
}
 
#col1, #col2, #col3 {
    width: 20%; float: left;text-align:justify;
}
 
#col1
{
margin:0px 15px 0px 15px;
}
#col2
{
margin:0px 50px 0px -300px;
}
#col3
{
margin:0px 0px 0px 0px;
}
#styleboth
{
clear: both;
}

SALUDOS