Comunidad de diseño web y desarrollo en internet online

columnas alturas iguales en 960gs

Citar            
MensajeEscrito el 17 Dic 2011 09:37 pm
Hola!! tengo una duda es posible hacer columnas de igual altura en 960gs. sin especificar el height del id, suponiendo tengo lo siguiente

Código HTML :

<div  class="container_12" id="content">
   <div class="grid_3" id="block1">
       <h1>SideBar</h1>
       <ul>
          <li><a href="#">enlace1</a></li>
          <li><a href="#">enlace2</a></li>
          <li><a href="#">enlace3</a></li>
       </ul>
       
    </div>
    <div class="grid_9" id="block2">
        <h1>Título 1000</h1>
        <p>
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <h2>Título 2</h2>
        <p>
           Suspendisse venenatis sodales nisl, et cursus magna gravida eget. Pellentesque venenatis condimentum arcu sed mollis. Nunc tortor magna, imperdiet mattis placerat in, ornare sodales erat. Cras felis turpis, feugiat quis suscipit sit amet, cursus sit amet urna. Suspendisse a aliquet nisi. Duis a mauris sit amet tortor venenatis auctor nec sed lorem. Phasellus sit amet sapien magna. Duis ut tellus nisi. Integer eu est vitae lectus scelerisque mattis. Nulla adipiscing auctor quam. Integer lacus leo, scelerisque vestibulum placerat id, tempor vel ante. Donec volutpat ultricies magna, sed egestas tortor ultricies vitae. Duis tincidunt malesuada leo quis ullamcorper. 
        </p>
        <h2>Título 3</h2>
        <p>
           Aenean luctus, arcu sed pellentesque sollicitudin, diam neque lacinia leo, eu volutpat massa urna et est. Morbi tincidunt ornare orci vel semper. Nunc quis risus quam, luctus malesuada sem. Cras varius, lorem quis dapibus volutpat, odio urna elementum velit, eget lacinia turpis urna condimentum sapien. Curabitur mattis odio bibendum urna hendrerit commodo. Etiam posuere molestie malesuada. Nulla sit amet nisi turpis. Aenean sit amet risus malesuada felis congue interdum non eget erat. Vestibulum purus purus, venenatis sit amet rutrum eget, pretium id lacus. Fusce eleifend, ligula in posuere molestie, libero nisi hendrerit elit, eget sagittis augue libero in est. Sed viverra nibh eget leo lobortis lobortis. Etiam id libero lectus. Sed vel diam id ipsum iaculis faucibus eu non sapien. Vivamus consectetur nisi lectus, vel ornare enim. Nullam ut viverra dolor. 
        </p>
    </div>
</div>
<div class="clear"></div>
<div class="container_12" id="footer">
        <div class="grid_2 prefix_10" id="foot">
              <h1>FOOTER</h1>
        </div>
</div>


Como se podria hacer para igualar las alturas de #block1, #block2.
Tambien lo he probado con jquery & equalheights.js pero no funciona en 960gs
Alguien me podria ayudar con esto no pude encontrar solucion ni en sitios de U.S

Por leo2gz

15 de clabLevel



 

chrome
Citar            
MensajeEscrito el 18 Dic 2011 02:50 am
Naturalmente un div no tiene por qué seguir la altura del div que tiene al lado.

Si no usaras 960gs la solución que yo usaría es declarar el div content como display: table; y los divs block1 y block 2 como display: table-cell.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 18 Dic 2011 05:33 am
La otra es hacer esto:

Código HTML :

#block1, 
#block2{
     display:inline-block;
     vertical-align:top;
     height:[tamaño]
}


Con eso tendrás los dos bloques al mismo tamaño.

El problema es que si la información es más alta que el limite entonces la info se va a ver por fuera de la caja. Entonces, para eso puedes en vez de usar height mejor max-height.

Por johnwmartinez

Claber

455 de clabLevel

5 tutoriales

Genero:Masculino  

Diseño, Desarrollo, Mercadeo

chrome
Citar            
MensajeEscrito el 18 Dic 2011 07:52 pm

johnwmartinez escribió:

El problema es que si la información es más alta que el limite entonces la info se va a ver por fuera de la caja.

Mejor hacer un diseño que sea adaptable a contenido dinámico. Usa height: auto; para que la altura se modifique dependiendo de tu contenido.

Por Kinduff

Claber

3563 de clabLevel

21 tutoriales
3 articulos

 

web dev wizzard

chrome
Citar            
MensajeEscrito el 20 Dic 2011 02:10 pm
Gracias por responder pero mi idea es utilizar 960gs. y de esa forma no funciona.
Sin el framework utilizo otro metodo el de margenes negativos.

Por leo2gz

15 de clabLevel



 

chrome

 

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