#1 [AYUDA] Alineacion con CSS
Hola, se que el tema de la alineación o maquetacion y sus problemas es mas que conocido, por eso estuve revisando por el foro pero no logro encontrar una solucion a mi plantilla, es que soy bastante nuevo con esto...
Una vez que tenga la estructura, agregarle estilos no me resulta complicado...

Dibujo la plantilla que estoy tratando de armar:


( URL de la imagen: http://www.hepatitisc2000.com.ar/maqueta.jpg )

Tengo progblemas con la alineacion de las cajas, se corren para cualquier lado!jajaj
A la numero 1 le doy float:left y a la numero 2float:rigth .... la tercera confloat:left (hasta aqui todo bien) pero la cuarta con float:rigth se corre y asi las demas tambien...
La idea es que la plantilla sea estatica.... por eso no jugue con position:absolute o esas cosas...

Este es el codigo, armado a los golpes:
Código:
<html><head>
body {margin: 0;
padding: 0;
font-family: sans-serif;
font-size: .7em;
line-height: 1.4em;}

div#header {padding: 2%;
text-align: center;
background-color: #ffffff;
color: #4b4842;
margin-bottom: 0px;
border-bottom: solid #739341 3px;}

div#footer {padding: 2%;
text-align: center;
clear: both;
border-top: solid #739341 3px;
background-color: #ffffff;}

div#maincontent {
    padding: 1%;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    float: left;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}

div#rightcolumn {padding: 2%;
float: right;
background-color: #ffffff;
border-left:solid #739341 3px;
width: 250px;}
</head>
<body>
<div id="header">CABECERA</div>

<div id="rightcolumn"> <p>Texto Texto<br>
Links Links<br>
Texto Texto<br>
    Links Links<br>
    Texto Texto<br>
    Links Links<br>
    Texto Texto<br>
    Links Links<br>
  </p>
</div>
<div id="maincontent"> <p>Texto..............................</p>
  <p>&nbsp;</p>
  <div style="width: 45%;    float: left;">CAJA 1 </div> 
  <div style="width: 45%;    float: right;">CAJA 2 </div>
<div style="width: 45%;    float: left;">CAJA 3 </div> 
  <div style="width: 45%;    float: right;">CAJA 4 </div>
</div>
<div id="footer">PIE</div>
</body></html>
Ojala alguien me pueda dar una mano, para terminar de armar esta estructura, y asi ponerme a trabajar con colores, imagenes y demas...

Desde ya gracias!

Responder a este tema

Citar

+
 
0
Me gusta
 
| Más