Problemas con columnas equilibradas en una página web

adrianespasa · 2011-08-19T10:20:23-0500

Hola beteanos.. hoy vengo con una duda, de la cual he buscado informacion, pero no la he podido resolver.

Y es la de intentar dejar las columnas equilibradas de la web (con esto hablo del sidebar izquierdo con el contenido).

Para ser mas preciso, ver imagen:

Ya he probado con colocarle a la caja del medio, y la caja contenedora height:100%, pero no me lo toma.

Este es el codigo html:

Insertar CODE, HTML o PHP:

<body>
<div id="pantalla">
  <div id="cuerpo_centro">
      <div id="cuerpo">
[COLOR=#ff0000]     <div id="left">[/COLOR]
      <div id="left_top"></div>
          <div id="left_midlle">
            <div class="texto_contacto" id="left_middle_contacto_foto"></div>
          <div id="left_bottom"></div>
        </div>
        <div id="right">
          <div id="right_botonera">
            <div id="right_botonera_left"></div>
            <div id="right_botonera_midlle">
            </div>
            <div id="right_botonera_right"></div>
          </div>
          <div id="right_logo"></div>
          <div id="right_contenido">
          </div>
        </div>
      </div>
  </div>
</div>
</body>

Y este el CSS:

Insertar CODE, HTML o PHP:

body{
    background:#000;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#131cc5;
    font-size:14px;
    padding:0px;
    margin:0px;
    height:auto;
    }
    
html{
    height:auto;}
    


#pantalla{
    position:relative;
    float:left;
    width:100%;
    height:auto;
    text-align:center;}
    


    
#cuerpo{
    width:100%;
    height:auto;
    position:absolute;
    float:left;
    background:#ebebeb;
    text-align:left;
    margin-top: 30px;
    }
    
#left{
    width:276px;
    [COLOR=#ff0000]height:100%;[/COLOR]
    background:#101BEC;
    position:relative;
    float:left;
    margin-top:-15px;
    border-right: 3px solid #000;
    }
    
#left_top {
    background:url(images/left_top.png) no-repeat;
    width:276px;
    height:12px;
    position:relative;
    float:left;
    mar}
    
#left_midlle {
    background:url(images/left_midlle.png) repeat-x top;
    width: 276px;
    [COLOR=#ff0000]height:auto; (tambien lo probe con height:100%)[/COLOR]
    position:relative;
    float:left;
}
        
    
#right{
    width:678px;
    height:auto;
    position:relative;
    float:right;
    background:#ebebeb url(images/cuerpo_top.png) no-repeat top right;
    margin-top:0px;
    }
    
    
#right_contenido{
    position:relative;
    float:left;
    width:603px;
    height:auto;
    margin-left: 17px;}
    
    
#right_contenido_middle_conteiner{
    background:#bebebe;
    width:589px;
    position:relative;
    float:left;
    height:auto;
    margin-left:5px;}
    
#right_contenido_middle{
    background:url(images/contenido_middle.png) repeat-x;
    width:589px;
    position:relative;
    float:left;
}
    
#right_contenido_middle_middle{
    background:url(images/contenido_middle.png) repeat-x;
    width:570px;
    height:230px;
    position:relative;
    float:left;
    margin-left:10px;}

Porque creen que no funciona?

MarioMX · 2011-08-23T11:36:30-0500

Prueba quitando el position:relative; en los estilos, como lo tienes con un float:left; te crea conflictos. Es uno u otro, pero no simultáneos. Si persiste, lo volvemos a revisar. Saludos.

Prueba este código, espero te sirva.

Insertar CODE, HTML o PHP:

<html>
<head>
<style>
body {background:#ccc; padding:0; margin:0;}
.container {width:980px; margin:0 auto; }
.central {width:100%; float:left; background:#fff;}
.left {width:230px; float:left; padding:0 10px 10px 10px;}
.logo {width:100%; float:left; height:90px; background:#eee; margin:10px 0; text-align:center;}
.menu01 {width:230px; float:left; background:#ccc;}
.menu01 h3 {padding:0 0 0 20px;}
.menu01 ul, li {list-style-type:none;}
.red-left {width:210px; margin:10px 0 0 0; height:200px; padding:10px; float:left; background:red; text-align:center;}
.right {width:700px; float:left; padding:10px; margin:10px 0 0 0; background:#333; height:660px;}
</style>
</head>
<body>
	<div class="container">
		<div class="central">
			<div class="left">
				<div class="logo">
				logotipo
				</div>
				<div class="menu01">
					<h3>Menu 01</h3>
					<ul>
						<li>
							<a href="#">Item 01</a>
						</li>
						<li>
							<a href="#">Item 02</a>
						</li>
						<li>
							<a href="#">Item 03</a>
						</li>
						<li>
							<a href="#">Item 04</a>
						</li>
						<li>
							<a href="#">Item 05</a>
						</li>
					</ul>
				</div>
				<div class="menu01">
					<h3>Menu 02</h3>
					<ul>
						<li>
							<a href="#">Item 01</a>
						</li>
						<li>
							<a href="#">Item 02</a>
						</li>
						<li>
							<a href="#">Item 03</a>
						</li>
						<li>
							<a href="#">Item 04</a>
						</li>
						<li>
							<a href="#">Item 05</a>
						</li>
					</ul>
				</div>
				<div class="red-left">
					la zona perdida
				</div>
			</div>
			<div class="right">
			
			</div>
		</div>
	</div>
</body>
</html>

Saludos!

Pepe Luis · 2011-08-24T17:16:21-0500

Tampoco es un pecado mortal usar un <table>
aunque no estoy seguro de haber entendido ¿que es lo que quieres alinear, la caja roja?

krusty72 · 2011-08-25T00:15:58-0500

Si entiendo bien, quieres que la caja roja del sidebar, se extienda a lo alto dependiendo del alto del contenido? Si es así quita la propiedad height en el css en todos los divs del sidebar.

Problemas con columnas equilibradas en una página web

adrianespasa

MarioMX

Pepe Luis

krusty72

Temas similares