Comunidad de diseño web y desarrollo en internet online

tres columnas en CSS

Citar            
MensajeEscrito el 29 Ago 2007 03:15 pm
bueno tengo aca el codigo en CSS

@charset "utf-8";
/* CSS Document */

html, body{
margin:0px;
padding:0px
}
#todo{
width:760px;
margin:auto;
}
#top{
height:120px;
background:#FFFF00
}
#menu{
height:30px;
background:#FF00FF
}
#cuerpo-a{
float:left;
width:200px;
background-color:blue
}
#cuerpo-b{
margin-left:200px;
margin-right:200px;
background-color:green
}
#cuerpo-c{
float:right;
width:200px;
background-color:red
}
#foot{
clear:both;
height:50px;
background:#CCCCCC
}
p{
margin:0px;
padding:10px;
}


y aca el html

<body>
<div id="todo">
<div id="top">top</div>
<div id="menu">menu</div>
<div id="cuerpo-a">cuerpo 1</div>
<div id="cuerpo-b">cuerpo2</div>
<div id="cuerpo-c">cuerpo3</div>
<div id="foot">foot</div>
</div>
</body>

y el resultado final es este


la pregunta es como hago para que el cuerpo 3 (en rojo) me quede alineado con los demas cuerpos?

desde ya muchas gracias![/img]

Por matiasnicolas

58 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 29 Ago 2007 03:22 pm
ya esta solucionado, solo cambie esto en el css


#cuerpo-a{
float:left;
width:200px;
background-color:blue
}
#cuerpo-b{
float:left;
width:360px;
background-color:green
}
#cuerpo-c{
float:left;
width:200px;
background-color:red
}

Por matiasnicolas

58 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 29 Ago 2007 04:23 pm
Si, el problema estaba en lo siguiente:
Al flotar elementos, si el ancho de éstos es mayor al espacio libre a la derecha/izquierda del elemento anterior, estos pasarán abajo. La solución es reducir anchos :D

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino  

The dark places where wolves access internet with 46,6 kbps

firefox
Citar            
MensajeEscrito el 29 Ago 2007 07:01 pm
vete quitando píxeles de la tercera columna hasta que se ajuste...

Es engorroso pero es lo mas eectivo :S

Por Marotorod

518 de clabLevel



 

En mi mundo...

firefox
Citar            
MensajeEscrito el 01 Sep 2007 07:34 am
primero que nada en fin...
lo que yo hago es flotar una columna a la izquierda y la otra a la derecha, la del centro queda fija con position relative(para que la caja crezca) y le doy un padding izquierdo del ancho de la columna izquierda

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.