Home/ Questions/Q 6958049
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T15:05:24+00:00

how do i give the same equal height columns in 960gs. I tried with

  • 0

how do i give the same equal height columns in 960gs. I tried with EqualHeights jQuery Plugin, but doesnt work.
I have this for example:

<!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" />
<title>Javascript</title>

<link rel="stylesheet" href="960/960.css" />
<link rel="stylesheet" href="960/reset.css" />
<link rel="stylesheet" href="960/text.css" />
<link rel="stylesheet" href="css/default.css" />
<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.equalheights.js"></script>
<script>
$(document).ready(function() {
    $("#block1").equalHeights(500);
    $("#block2").equalHeights(500);
});
</script>
</head>

<body>

<div class="container_12" id="header">
    <div class="grid_3" id="logo">
        <h1>Header</h1> 
    </div>
</div>

<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>
        <h2>Título 4</h2>
        <p>
            Quisque bibendum, purus sed consequat feugiat, elit orci bibendum odio, quis tincidunt dui ligula ut nibh. Vestibulum posuere est id urna hendrerit porta. Praesent nec hendrerit mauris. Aliquam et dui et eros venenatis egestas id et magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras faucibus, justo id rutrum elementum, odio dui viverra felis, molestie commodo urna massa eu mi. Cras vitae est justo. Pellentesque congue nisl erat. Proin vitae orci sit amet mi vehicula rhoncus ut ac sem. Cras suscipit arcu ut turpis porttitor elementum. 
        </p>
        <h2>Título 5</h2>
        <p>
            Morbi magna nunc, lacinia quis vestibulum sit amet, scelerisque eget dui. Vestibulum eu dui tellus. Integer vitae fermentum quam. Nulla ut neque tortor, vitae bibendum elit. Morbi mi orci, fermentum a tincidunt a, lacinia ut quam. Sed magna tortor, tristique at bibendum gravida, vulputate a nunc. Aliquam sit amet dapibus odio. Mauris posuere lectus nec ipsum accumsan interdum. Nunc rhoncus imperdiet tortor in porta. Suspendisse in lorem non arcu luctus commodo at eget dui. Suspendisse cursus posuere enim, ac porta libero dignissim a. Proin sit amet elit nec turpis malesuada cursus eget at est. Sed at mauris risus, a commodo dolor. Praesent tristique imperdiet hendrerit. 
        </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><!--grid_3-->
</div><!--container_12-->
</body>
</html>

which would be the solution to have columns of equal height in 960gs.
Thanx.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want to use the EqualHeights plugin for this, make sure you select everything that should be equalized in a single call to equalHeights(). So instead of:

    $("#block1").equalHeights(500);
$("#block2").equalHeights(500);

    Use:

    $("#block1, #block2").equalHeights(500);

    Demo: http://jsfiddle.net/aJxNe/

    There are surely CSS solutions to the equal height problem like using faux columns, but I’m not familiar with 960gs specifically.

    • 0