Problema con las 3 columnas

eMaa · #1 (**permalink**) 30/03/2011, 13:18

Estoy intentando hacer un header y luego abajo seria a tres columnas pero el problema de que la primera de ellas se va hacia abajo al poner contenido en la del medio (la central). dejo una imagen y el codigo para que se entienda mejor.

como ven al poner contenido en la primera columna la de la izquierda se va hacia abajo, ya probe poniendo overflow hidden a la del centro pero sigue igual

Dejo el code:

Cita:

body {
margin:0;
padding:0;
background: #999;
}
/* Header */
.header {
background:#000;
width: auto;
margin:0px;
height:60px;
border-bottom:#666 solid 10px;
color:#FFF;
padding:0px;
}

.header a:link, a:visited, a:active, a:hover{
text-decoration:none;
color:#FFF;
}

.header .logo{
background:url(logo.png);
width:150px;
height:50px;
float:left;
padding:0px;
position:relative;
}

.header .mensaje{
background:url(mensaje.png);
width:39px;
height:26px;
padding:0px;
position:relative;
left:200px;
}

.header .notificacion{
background: url(notificacion.png) no-repeat;
width:39px;
height:26px;
padding:0px;
position:relative;
left:200px;
}
.header .buscador{
position:relative;
top:-50px;
left:400px;
}

.header .boton-enviar{
background:url(mensaje.png);
}

.header .inicio-registrarse {
width:5px;
height:5px;
padding:0px;
position:relative;
left:700px;
top:-100px;
}

.header .opciones {

}

.header .salir {

}
/* CUERPO */
.cuerpo {
margin:auto;
padding:0px;
width:1000px;
}

.cuerpo-derecha {
float:right;
border-left:solid #666 1px;
height:auto;
margin:0px 0px 0px 0px;
padding:0px 10px 10px 10px;
border-right:solid #666 1px;
width:200px;
text-align:center;
line-height:15px;
background:#FFF;
overflow:hidden;
}

.cuerpo-centro {
width:200px;
margin:0px 0px 0px 350px;
width:300px;
padding:0px 0px 10px 0px;
text-align:center;
line-height:15px;
background:#FFF;
overflow:hidden;
}

.cuerpo-izquierda {
float:left;
border-right:solid #666 1px;
border-left:solid #666 1px;
height:auto;
padding:0px 10px 10px 10px;
margin:-15px 0px 0px 0px;
line-height:15px;
text-align:center;
width:200px;
background:#FFF;
overflow:hidden;
}

.avatar {
background:url(avatar.png) no-repeat;
width:100px;
height:95px;
float:left;
margin:30px 0px 0px 0px;
}

.usuario{
float:right;
margin:50px 0px 0px 0px;
}

laratik · #2 (**permalink**) 30/03/2011, 13:29

Es difícil ayudarte sin tener el html como referencia, en el código CSS que posteaste solo veo clases, pero no se que hace cada uno dentro del html. Excepto el body

eMaa · #3 (**permalink**) 30/03/2011, 13:32

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style/estilo1.css" media="screen" type="text/css" />
<?php 
// Si no existe un titulo que ingrese por post se pone el predeterminado, en caso contrario se pone el ingresado
if(!isset($_POST['titulo']))
          {echo'<title>Distatio.com</title>';
		  }
          else{echo'<title>$_POST["titulo"]</title>';
		  } 
		  ?>
</head>

<body>
<div class="header">
 <a href="index.php"><div class="logo"></div></a>
      <div class="mensaje"></div>
      <div class="notificacion"></div>
      <div class="buscador">
                <legend>Buscar</legend>
               <form method="get" action="buscar.php">
               <input type="text" name="termino_busqueda" />
               <input class="boton-enviar"  type="submit" value=" "/>
               </form>
      </div>      
  <a href="index.php"><div class="inicio-registrarse"><h3>Inicio</h3></div></a>
<?php
//Si no es un usuario logeado se muestra el link de reigstro, si lo es se muestra link de opciones y salir
    if(!isset($_SESSION['usuario'])){
      echo '<div class="inicio-registrarse"><a href="registro.php"><h3>Registrarse</h3></a></div>';
	}else{
		echo '<div class="opciones"><h3>Opciones</h3></div>
		      <div class="salir"><h3>Salir</h3></div>';}
?>
      
</div>


<div class="cuerpo">
      <div class="cuerpo-derecha">derecha</div>
      <div class="cuerpo-centro">Los bloques opositores habían reunido 128 diputados y les faltaba uno para comenzar a debatir modificaciones en el mínimo no imponible. Pero el jefe del bloque del FPV, Agustín Rossi, ingresó al recinto y pidió la suspensión sin sentarse en su banca.
Etiquetas

Congreso, aumento mínimo no imponible, diputados, fracaso sesión
El Congreso volvió a ser el centro del escándalo y de acusaciones cruzadas porque la oposición no alcanzó el quórum en la Cámara de Diputados para tratar el aumento del mínimo no imponible del impuesto a las Ganancias. Con 128 legisladores presentes y 129 ausentes, el presidente de la Cámara levantó la sesión que aspiraba a darle media sanción a la iniciativa que pretende que 1,5 millones de trabajadores dejen de pagar el tributo.
La sesión en un principio iba a ser a las 10 de la mañana, pero después se corrió para las 13 horas. Cuatro minutos pasada la media hora de espera, el presidente de la Cámara, Eduardo Fellner, levantó la sesión porque había 128 diputados en sus bancas. Así, Fellner dio curso a la moción que realizó el jefe del bloque del kirchnerismo, Agustín Rossi, quien rápidamente se levantó de su asiento para no dar quórum.
"Lo que hizo Fellner es un piquete parlamentario para dejar sin voz al pueblo argentino", aseguró el diputado del PRO Federico Pinedo. El legislador manifestó que hubo quórum porque había 128 diputados sentados y Agustín Rossi que estaba parado. "Una vez más el oficialismo nos dejó sin quórum", coincidió el precandidato radical Ricardo Alfonsín. El hijo del ex presidente aseveró que también hubo quórum porque hay que contabilizar a todos los diputados presentes y no solo a los que están sentados.
El jefe del bloque del FPV, Agustín Rossi, argumentó que la sesión estaba convocada "fuera de reglamento" y luego de "esperar los 30 minutos de tolerancia" para comprobar si se reunía quórum, reclamó que se levantara el debate, lo que fue aceptado por el presidente de la Cámara. "Si la oposición no tiene los diputados que no traten de construir una agenda unilateral", agregó.
El diputado del Peronismo Federal Felipe Solá reconoció que dos diputados de su espacio no asistieron. El ex gobernador bonaerense explicó que uno se encuentra de viaje, mientras que el otro tenía una reunión.
"Hay 1,5 millones de trabajadores que pagan ganancias cuando no les corresponde. El Gobierno dice que es progresista pero de revolucionario no tiene nada porque los trabajadores pagan lo que no les corresponde", manifestó la diputada de la Coalición Cívica, Fernanda Reyes.
El economista y diputado de Proyecto Sur, Claudio Lozano, resaltó que "el FPV le da la espalda al reclamo de los trabajadores y privilegian la subordinación antes que el interés de los trabajadores". "El grueso de la responsabilidad recae sobre l</div>
      <div class="cuerpo-izquierda">
                 <!-- <div class="avatar"></div>       
                <div class="usuario"><p>Usuario</p><p>Perfil</p></div> -->
      <?php
//Si no es un usuario el que ingreso se muestra el form de registro
	  if(!isset($_SESSION['usuario'])){
		  include('form.php');
		  }
	  ?>
      </div>
      
</div>
</body>

</html>

laratik · #4 (**permalink**) 30/03/2011, 13:55

intenta con esto:

Código HTML:

Ver original<div class="cuerpo">
      <div class="cuerpo-derecha">derecha</div>
      <div class="cuerpo-izquierda">
                 <!-- <div class="avatar"></div>       
                <div class="usuario"><p>Usuario</p><p>Perfil</p></div> -->
      izquierda
      </div>
      <div class="cuerpo-centro">Los bloques opositores habían reunido 128 diputados y les faltaba uno para comenzar a debatir modificaciones en el mínimo no imponible. Pero el jefe del bloque del FPV, Agustín Rossi, ingresó al recinto y pidió la suspensión sin sentarse en su banca.
Etiquetas
 
Congreso, aumento mínimo no imponible, diputados, fracaso sesión
El Congreso volvió a ser el centro del escándalo y de acusaciones cruzadas porque la oposición no alcanzó el quórum en la Cámara de Diputados para tratar el aumento del mínimo no imponible del impuesto a las Ganancias. Con 128 legisladores presentes y 129 ausentes, el presidente de la Cámara levantó la sesión que aspiraba a darle media sanción a la iniciativa que pretende que 1,5 millones de trabajadores dejen de pagar el tributo.
La sesión en un principio iba a ser a las 10 de la mañana, pero después se corrió para las 13 horas. Cuatro minutos pasada la media hora de espera, el presidente de la Cámara, Eduardo Fellner, levantó la sesión porque había 128 diputados en sus bancas. Así, Fellner dio curso a la moción que realizó el jefe del bloque del kirchnerismo, Agustín Rossi, quien rápidamente se levantó de su asiento para no dar quórum.
"Lo que hizo Fellner es un piquete parlamentario para dejar sin voz al pueblo argentino", aseguró el diputado del PRO Federico Pinedo. El legislador manifestó que hubo quórum porque había 128 diputados sentados y Agustín Rossi que estaba parado. "Una vez más el oficialismo nos dejó sin quórum", coincidió el precandidato radical Ricardo Alfonsín. El hijo del ex presidente aseveró que también hubo quórum porque hay que contabilizar a todos los diputados presentes y no solo a los que están sentados.
El jefe del bloque del FPV, Agustín Rossi, argumentó que la sesión estaba convocada "fuera de reglamento" y luego de "esperar los 30 minutos de tolerancia" para comprobar si se reunía quórum, reclamó que se levantara el debate, lo que fue aceptado por el presidente de la Cámara. "Si la oposición no tiene los diputados que no traten de construir una agenda unilateral", agregó.
El diputado del Peronismo Federal Felipe Solá reconoció que dos diputados de su espacio no asistieron. El ex gobernador bonaerense explicó que uno se encuentra de viaje, mientras que el otro tenía una reunión.
"Hay 1,5 millones de trabajadores que pagan ganancias cuando no les corresponde. El Gobierno dice que es progresista pero de revolucionario no tiene nada porque los trabajadores pagan lo que no les corresponde", manifestó la diputada de la Coalición Cívica, Fernanda Reyes.
El economista y diputado de Proyecto Sur, Claudio Lozano, resaltó que "el FPV le da la espalda al reclamo de los trabajadores y privilegian la subordinación antes que el interés de los trabajadores". "El grueso de la responsabilidad recae sobre l</div>

Dentro del css coloca margin 0, a mi me quedo algo asi:

Código CSS:

Ver original.cuerpo-derecha {
float:right;
border-left:solid #666 1px;
height:auto;
margin:0px 0px 0px 0px;
padding:0px 10px 10px 10px;
border-right:solid #666 1px;
width:200px;
text-align:center;
line-height:15px;
background:#FFF;
overflow:hidden;
}
 
.cuerpo-centro {
/*width:200px;
margin:0px 0px 0px 350px;*/
margin: auto;
width:300px;
/*padding:0px 0px 10px 0px;*/
text-align:center;
line-height:15px;
background:#FFF;
overflow:hidden;
}
 
.cuerpo-izquierda {
float:left;
border-right:solid #666 1px;
border-left:solid #666 1px;
height:auto;
padding:0px 10px 10px 10px;
margin:0;
line-height:15px;
text-align:center;
width:200px;
background:#FFF;
overflow:hidden;
}

y el resultado:

eMaa · #5 (**permalink**) 30/03/2011, 14:05

cual es el cambio que hiciste? en cual margin

laratik · #6 (**permalink**) 30/03/2011, 14:17

El cambio principal esta en la estructura HTML, debes colocar de ultimo el div central, luego solo indico que coloques el margin del div izquierdo a 0, ya que lo estas manejado con el top a -15, eso es todo. Creo que los cambios se ven claramente en el código que postee.

eMaa · #7 (**permalink**) 30/03/2011, 14:22

Gracias capo se soluciono, te va karma