...

View Full Version : Link the height of divs



vmicchia
07-24-2012, 01:31 PM
I have 4 divs of the same class. Due to changing information displayed in them they may need to change height. Is there anyway that I can link the height attributes of the divs together so they stay the same size?

VIPStephan
07-24-2012, 03:16 PM
It depends. If they are displayed next to each other and don’t have absolutely positioned content as direct children you can use display: table-cell. But this also requires some consideration regarding margins and stuff.

vmicchia
07-24-2012, 06:30 PM
They are aligned side by side using float: left;. one of the boxes looks something like this:

<div class="hierarchyrelcontbox">
<div class="hierarchyrelcontboxcont">
<div class="hierarchyrelcontboxcontimg">
<a href="#"><img src="images/hierarchy/q120-th.jpTH.jpg" alkt="" /></a>
</div>
<div class="hierarchyrelcontboxcontleaf">
<p>Class</p>
</div>
<div class="hierarchyrelcontboxcontbrand">
<p>Name</p>
</div>
<div class="hierarchyrelcontboxcontmodel">
<p>Description</p>
</div>
</div>
<div class="hierarchyrelcontboxbotbar">
<form method="POST" action="#">
Qty: <input type="text" size="2" /> <input type="submit" value="Take a Look!" />
</form>
</div>
</div>

There are 4 of those boxes with the same classes. The Description area is the one that may take up more lines and force the bottom bar down. I want the bottom bar on all 4 of the divs to remain at the same height as each other. Tried Display: table-cell and it did not work.

bellcoder
07-24-2012, 06:45 PM
This can't be done easily unless you use some JavaScript to adjust the heights. A quick and easy way around is to use table.

VIPStephan
07-24-2012, 06:57 PM
No, I have to object bellcoder’s statement, it’s just too general.

Of course, when using display: table-cell you must not float the elements at the same time. In the worst case you can work with “faux columns”. But please show us your entire HTML to determine the best approach.

vmicchia
07-24-2012, 07:32 PM
OK here's the entire html for that page (it loads inside another).

<div id="hiercont">
<div id="leftbar">
<div id="help">
<a href="#"><img src="images/es_leftnav_LiveChat1.jpg" /></a>
</div>
<div id="drilldown">
<a href="#"><img src="images/es_leftnav_ProdbyCat.gif" alt="Products by Category" /></a>
<a href="#"><img src="images/es_leftnav_ProdbyBrand.gif" alt="Products by Brand" /></a>
<ul style="list-style: none; margin-left: -30px;">
<li><a href="#">Batteries and Flashlights</a></li>
<li><a href="#">Boxes and Covers</a></li>
<li><a href="#">Conduit, Fittings and Accessories</a></li>
<li><a href="#">Drives and Motion Control</a></li>
<li><a href="#">Enclosures, Wireways, Wire Duct and Cable Trays</a></li>
<li><a href="#">Fans, Ventilation, and Heaters</a></li>
<li><a href="#">Fasteners</a></li>
<li><a href="#">Fuses and Accessories</a></li>
<li><a href="#">Industrial and Commercial Lighting</a></li>
<li><a href="#">Industrial Control</a></li>
<li><a href="#">Lamps and Ballasts</a></li>
<li><a href="#">Lighting Showroom</a></li>
<li><a href="#">Paint, Adhesives, Greases and chemicals</a></li>
<li><a href="#">PLC, HMI and Computers</a></li>
<li><a href="#">Power Distribution/Switch Gear, Transformers, Power Supplies, UPS/Protection </a></li>
<li><a href="#">Power Transmission Products-Motors, Belts, and Bearings</a></li>
<li><a href="#">Safety and Signaling Devices</a></li>
<li><a href="#">Sensing, Safety Controls and System Connectivity</a></li>
<li><a href="#">Software and Automation Services</a></li>
<li><a href="#">Ties, Terminals, Tape, Lugs and Grounding</a></li>
<li><a href="#">Tools, Test Equipment and Labeling</a></li>
<li><a href="#">Voice, Data, Fire Alarm and Video</a></li>
<li><a href="#">Wire, Cable, and Portable Cords</a></li>
<li><a href="#">Wiring Devices</a></li>
<li><a href="#">Clearance Items!</a></li>
</ul>
</div>
<div id="leftad">
<img src="images/es_leftnav_SidebarBanner-Energizer.jpg" />
</div>
</div>
<div id="hiercontcontent">
<div id="breadcrumb">
Home <img src="images/arrowBlackRight.gif" />
</div>
<div id="hierarchy">
<p>Browse our extensive selection of Electrical Supply products. Whether it is for a large electrical system installation, Commercial LED Lighting System, Industrial Automation or just batteries for Christmas, Kirby Risk has the products and expertise you can count on!</p>
</div>
<div id="hierarchyrel">
<div id="hierarchyreltopbar">
<p>May we recommend</p>
</div>
<div id="hierarchyrelcont">
<div class="hierarchyrelcontbox">
<div class="hierarchyrelcontboxcont">
<div class="hierarchyrelcontboxcontimg">
<a href="#"><img src="images/hierarchy/q120-th.jpTH.jpg" alt="" /></a>
</div>
<div class="hierarchyrelcontboxcontleaf">
<p>Circuit Breakers</p>
</div>
<div class="hierarchyrelcontboxcontbrand">
<p>SIEMENS</p>
</div>
<div class="hierarchyrelcontboxcontmodel">
<p>Model # ITE Q120 </p>
</div>
</div>
<div class="hierarchyrelcontboxbotbar">
<form method="POST" action="#">
Qty: <input type="text" size="2" /> <input type="image" src="images/addToCart.gif" value="Add to Cart" />
</form>
</div>
</div>
<div class="hierarchyrelcontbox">
<div class="hierarchyrelcontboxcont">
<div class="hierarchyrelcontboxcontimg">
<a href="#"><img src="images/hierarchy/2151951_TH.jpg" alt="" /></a>
</div>
<div class="hierarchyrelcontboxcontleaf">
<p>Industrial Control</p>
</div>
<div class="hierarchyrelcontboxcontbrand">
<p>ALLEN BRADLEY</p>
</div>
<div class="hierarchyrelcontboxcontmodel">
<p>Model # 281D-F12D-10C-CR</p>
</div>
</div>
<div class="hierarchyrelcontboxbotbar">
<form method="POST" action="#">
Qty: <input type="text" size="2" /> <input type="image" src="images/addToCart.gif" value="Add to Cart" />
</form>
</div>
</div>
<div class="hierarchyrelcontbox">
<div class="hierarchyrelcontboxcont">
<div class="hierarchyrelcontboxcontimg">
<a href="#"><img src="images/hierarchy/2381028_TH.jpg" alt="" /></a>
</div>
<div class="hierarchyrelcontboxcontleaf">
<p>Lamps and Ballasts</p>
</div>
<div class="hierarchyrelcontboxcontbrand">
<p>PHILIPS LIGHTING COMPANY</p>
</div>
<div class="hierarchyrelcontboxcontmodel">
<p>Model # 7MR16/END/F24 3000 DM 10/1</p>
</div>
</div>
<div class="hierarchyrelcontboxbotbar">
<form method="POST" action="#">
Qty: <input type="text" size="2" /> <input type="image" src="images/addToCart.gif" value="Add to Cart" />
</form>
</div>
</div>
<div class="hierarchyrelcontbox">
<div class="hierarchyrelcontboxcont">
<div class="hierarchyrelcontboxcontimg">
<a href="#"><img src="images/hierarchy/2211934_TH.jpg" alt="" /></a>
</div>
<div class="hierarchyrelcontboxcontleaf">
<p>Tools, Test Equipment and Labeling</p>
</div>
<div class="hierarchyrelcontboxcontbrand">
<p>IDEAL INDUSTRIES</p>
</div>
<div class="hierarchyrelcontboxcontmodel">
<p>Model # 61-744</p>
</div>
</div>
<div class="hierarchyrelcontboxbotbar">
<form method="POST" action="#">
Qty: <input type="text" size="2" /> <input type="image" src="images/addToCart.gif" value="Add to Cart" />
</form>
</div>
</div>
</div>
</div>
</div>
</div>

Here is the css that pertains to this code:

#hiercont{
width: 1000px;
margin: 0;
padding: 0;
}

#hiercont #leftbar{
width: 220px;
border: 1px solid #ccc;
float: left;
margin-left: 10px;
}

#hiercont #leftbar #help{
width: 218px;
height: 105px;
border: 1px solid #ccc;
}

#hiercont #leftbar #drilldown{
margin-left: 3px;
margin-right: 3px;
}

#hiercont #leftbar #drilldown ul li a:link{
font-family: 'arial';
font-size: 13pt;
color: #000;
text-decoration: none;
}

#hiercont #leftbar #drilldown ul li a:visited{
font-family: 'arial';
font-size: 13pt;
color: #000;
text-decoration: none;
}

#hiercont #leftbar #drilldown ul li a:hover{
font-family: 'arial';
font-size: 13pt;
color: #000;
}

#hiercont #leftbar #drilldown ul li a:active{
font-family: 'arial';
font-size: 13pt;
color: #000;
text-decoration: none;
}

#hiercont #leftbar #drilldown ul li{
margin-bottom: 5px;
}

#hiercont #leftbar #leftad{
width: 220px;
height: 240px;
border: 1px solid #ccc;
}

#hiercont #hiercontcontent{
width: 711px;
border: 1px solid #ccc;
float: left;
margin-left: 15px;
}
#hiercont #hiercontcontent #breadcrumb{
width: 711px;
height: 23px;
line-height: 23px;
vertical-align: middle;
text-indent: 10px;
}

#hiercont #hiercontcontent #hierarchy{
width: 711px;
min-height: 300px;
margin-bottom: 10px;
}

#hiercont #hiercontcontent #hierarchyrel{
width: 711px;

margin: 0;
padding: 0;
}

#hiercont #hiercontcontent #hierarchyrel #hierarchyreltopbar{
width: 709px;
height: 24px;
background-color: #ccc;
margin: 0;
padding: 0;
}

#hiercont #hiercontcontent #hierarchyrel .hierarchyrelcontbox{
float: left;
display: table-cell
}

#hiercont #hiercontcontent #hierarchyrel .hierarchyrelcontbox .hierarchyrelcontboxcont{
margin: 0;
padding: 0;

}

#hiercont #hiercontcontent #hierarchyrel .hierarchyrelcontbox .hierarchyrelcontboxcont .hierarchyrelcontboxcontimg{
width: 176px;
height: 105px;
}

#hiercont #hiercontcontent #hierarchyrel .hierarchyrelcontbox .hierarchyrelcontboxcont .hierarchyrelcontboxcontimg img{
margin-left: 35px;
margin-top: 3px;
}

#hiercont #hiercontcontent #hierarchyrel .hierarchyrelcontbox .hierarchyrelcontboxcont .hierarchyrelcontboxcontleaf{
width: 176px;
height: 30px;
text-align: center;
}

#hiercont #hiercontcontent #hierarchyrel .hierarchyrelcontbox .hierarchyrelcontboxcont .hierarchyrelcontboxcontbrand{
width: 176px;
height: 30px;
text-align: center;
}

#hiercont #hiercontcontent #hierarchyrel .hierarchyrelcontbox .hierarchyrelcontboxcont .hierarchyrelcontboxcontmodel{
width: 176px;
text-align: center;
}

#hiercont #hiercontcontent #hierarchyrel .hierarchyrelcontbox .hierarchyrelcontboxbotbar{
background-color: #eee;
width: 176;
height: 28px;
line-height: 28px;
vertical-align: middle;
}

#hiercont #hiercontcontent #hierarchyrel .hierarchyrelcontbox .hierarchyrelcontboxbotbar input{
vertical-align: middle;
}

VIPStephan
07-24-2012, 07:52 PM
As I said: don’t use float and display: table-cell together. It must read:


#hiercont #hiercontcontent #hierarchyrel .hierarchyrelcontbox{
display: table-cell;
}

vmicchia
07-24-2012, 09:01 PM
I took out the float and only used the table cell and still had the same problem. I've attached a screenshot of the issue

vmicchia
07-25-2012, 02:33 PM
On a side note I'm not opposed to laying these out differently if there is a better way.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum