Web con 3 columas y una con 100% height

[JaimeMSE]

Hola, estoy haciendo una web y me surge ha surgido un problema.

Tengo una columna a la izquierda con 215px de tamaño, el del centro con 500px de tamaño y la de la derecha con 130px de tamaño.

He hecho que me coja las noticias (que van en la columna del centro) desde la base de datos con PHP+MySQL, el problema lo tengo cuando la 3º noticia se pone debajo de la columna de la izquierda.

Mi duda es: ¿Cómo puedo poner que esa columna (la izquierda) ocupe el 100% del tamaño, como en Wordpress?

Aquí os dejo una imagen:


Un saludo y gracias!

[IsaBelM]

tienes dos maneras

• usar lo que se denomina columnas equilibradas
• usar las propiedades css para crear tablas

[kseso?]

Ayudaría el ver su marcado básico del html y el css asociado.
Pero así, por la imagen diría que tiene la izquierda dento de la central (y lógicamente antes que lo que llama noticias).

Algo así como:
<div class="centro">
<div class="izq"></div>
las noticias</div>

Cuando debería ser:

<div class="izq"></div>
<div class="centro">las noticias</div>

[JaimeMSE]

Gracias por responder. Os pongo el CSS y el HTML de esas partes:


CSS

Código CSS:

/*** Lateral Izq ***/
#lateralizq {
    width: 215px;
    float: left;
}
 
/*** Lateral Der ***/
#lateralder {
    width: 130px;
    float: left;
    margin-left: 20px;
    margin-top: 20px !important; 
}
 
/*** Contenido ***/
#contenido {
    width: 500px;
    float: left;
    margin: 20px 0 0 40px;
}
 

Y ahora el HTML

Código HTML:

<!-- AQUI EMPIEZA EL LATERAL IZQUIERDO -->
<div id="lateralizq"><br/>
        <div id="bloquelateral">
        <div id="arribabloque"><h3>Men&uacute; principal</h3></div>  
        <div id="limpiarespacio"></div>
        <div id="centrobloque">
                <ul>
                    <li><a href="index.php" title="P&aacute;gina de inicio">Inicio</a></li>
                    <li><a href="staff.php" title="Staff">Staff</a></li>
                    <li><a href="contacto.php" title="Contacto">Contacto</a></li>
                    <li><a href="nosotros.php" title="Nosotros">Nosotros</a></li>
                    <li><a href="ayudanos.php" title="Ay&uacute;danos">Ay&uacute;danos</a></li>
                    <li><a href="administracion/login.php" title="Administraci&oacute;n">Administraci&oacute;n</a></li>
                </ul>  
                
                       
        <div id="arribabloqueup"><h3>Animales</h3></div> 
        
                <ul>
                    <li><a href="perros/cachorros.php" title="Ver los cachorros">Cachorros</a></li>
                    <li><a href="perros/perros.php" title="Ver todos los perros">Perros</a></li>
                    <li><a href="gatos/gatos.php" title="Ver todos los gatos">Gatos</a></li>
                    <li><a href="galgos/galgos.php" title="Ver todos los galgos">Galgos</a></li>
                    <li><a href="otros/felices.php" title="Ver los finales felices">Finales felices</a></li>
                    <li><a href="otros/cielo.php" title="Ver todos los animales que partieron hacia el cielo">En el cielo</a></li>
                    <li><a href="otros/casosespeciales.php" title="Ver los casos especiales">Casos especiales</a></li>
                    <li><a href="otros/urgentes.php" title="Ver los casos m&aacute;s urgentes">Urgentes</a></li>
        </ul>
                
            
        <div id="arribabloqueup"><h3>Formularios</h3></div>  
         
                <ul>
                    <li><a href="formularios/adopcion.php" title="Formulario de Adopci&oacute;n">Formulario de Adopci&oacute;n</a></li>
                    <li><a href="formularios/socio.php" title="Formulario para hacerse Socio">Formulario para hacerse Socio</a></li>
                </ul>  
                   
         <div id="arribabloqueup"><h3>Futuros</h3></div>    
        
                <ul>
                    <li><a href="ayuda/comoadoptar.php" title="C&oacute;mo adoptar">Planos y presupuestos</a></li>
                    <li><a href="ayuda/comoapadrinar.php" title="C&oacute;mo apadrinar">Proyectos en mente</a></li>
                    <li><a href="ayuda/comosocio.php" title="C&oacute;mo hacerse socio">Proyectos finalizados</a></li>
        </ul> 
                
                     
        <div id="arribabloqueup"><h3>Ayuda</h3></div>    
        
                <ul>
                    <li><a href="ayuda/comoadoptar.php" title="C&oacute;mo adoptar">C&oacutemo adoptar</a></li>
                    <li><a href="ayuda/comoapadrinar.php" title="C&oacute;mo apadrinar">C&oacute;mo apadrinar</a></li>
                    <li><a href="ayuda/comosocio.php" title="C&oacute;mo hacerse socio">C&oacute;mo hacerce socio</a></li>
                    <li><a href="ayuda/comovoluntario.php" title="C&oacute;mo ser voluntario">C&oacute;mo ser voluntario</a></li>
                    <li><a href="ayuda/comoacogida.php" title="C&oacute;mo ser casa de acogida">C&oacute;mo ser casa de acogida</a></li>
                    <li><a href="ayuda/comocolaborar.php" title="C&oacute;mo colaborar">C&oacute;mo colaborar</a></li><br/>
        </ul>
                </div>
               
         </div>   
          <div id="abajobloque"></div>
         </div><!-- Fin de #lateral -->
 
<!-- AQUI EMPIEZA EL INDEX -->
 
<?php
include('cabecera.php');
include('lateralizq.php');
 
$resultado = mysql_query("SELECT * FROM noticias",$conexion);
 
while ($row = mysql_fetch_array($resultado)) {
?>    
 
 
 
<div id="contenido">
<h1 class="titulonoticia"><a href="#"><?php echo $row["titulo"] ?></a></h1>
 
            
            <?php echo $row["cuerpo"] ?>
            
        
            <div id="datosnoticia">Escrito por: <strong><?php echo $row["autor"] ?></strong> el <strong><?php echo $row["fecha"] ?></strong><br/>
            <strong>Categor&iacute;a:</strong> <?php echo $row["categoria"] ?> | <a href="#">Comenta esta noticia</a></div>
 
</div><!-- #contenido -->
 
<?php }
include('lateralder.php');
include('pie.php');
?>
 
<!-- AQUI EMPIEZA EL LATERAL DERECHO -->
 
<div id="lateralder">
    <h3>¡ Ay&uacute;danos !</h3>  
        <img src="/imagenes/paypal.gif" alt="Ayudanos" class="publicidad"/> 
    
    <h3>Idiomas</h3>
    <div id="idiomas"><img src="/imagenes/es.png" alt="Espa&ntilde;ol"/>
    <img src="/imagenes/en.png" alt="English"/>
    <img src="/imagenes/de.png" alt="Deutsch"/>
    <img src="/imagenes/pt.png" alt="Portugu&eacute;s"/></div><!-- #idiomas -->
        
    <h3>Buscador </h3>
    <div id="buscador"><input type="text" name="buscador" id="buscador" maxlength="30" size="20" value="" /><input type="submit" class="enviarbuscador" value="Buscar" /> 
    </div><!-- #buscador -->
    
    <h3>Publicidad</h3>
    <img src="/imagenes/banner.jpg" alt="Publicidad" class="publicidad"/>
    
</div><!-- #lateralder -->
 

Ahi os lo dejo, aviso que en el index llamo a la cabecera, lateralizq, lateralder y pie, en este orden.

Espero que me podáis ayudar, ya que sin esto no puedo continuar. Muchas gracias de nuevo.

[IsaBelM]

todos los bloques #contenido han de ser contenido por un bloque con float left. a #contenido le quitas el float.

por cierto en lugar de usar id, usa class. las id deben ser únicas.

por otro lado como parche para un futuro, puede ser de tu interés usar columnas equilibradas

[JaimeMSE]

Al final voy a rediseñarlo todo desde 0, ya veré si con 960 grid o con lo que me has puesto.

Gracias de todas formas!