Temas > Programacion > Css > Disposicion de 2 columnas (propiedad float)
Julio

Disposición de 2 columnas (propiedad float)
Una segunda forma de implementar una página con dos columnas es utilizar
la propiedad float.
Disponemos dos div. Al primero lo flotamos hacia la izquierda con un width
fijo y el segundo se acomoda inmediatamente a la derecha.
Veamos un ejemplo:
<?php //esto no va
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="columna1">
Aquí el contenido de la columna 1.
</div>
<div id="columna2">
Aquí el contenido de la columna 2.
</div>
</body>
</html>
?>//esto no va
La hoja de estilo:
<?php //esto no va
*{
  margin:0;
  padding:0;
}
#columna1 {
  float:left;
  width:200px;
  background-color:#ff5;
  border:1px solid #555;
}
#columna2 {
  margin-left:210px;
  background-color:#ffb;
  border:1px solid #555;
}
?>//esto no va
La columna1 tiene un ancho de 200 pixeles. Luego para evitar que la columna
dos envuelva a la columna uno en caso de ser más larga inicializamos
margin-left con 210 pixeles.













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
      1
2345678
9101112131415
16171819202122
23242526 272829
30      

Viernes 27 de Junio 2025
Semana 26

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar