Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Link the height of divs

    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?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,638
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    They are aligned side by side using float: left;. one of the boxes looks something like this:
    Code:
     <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.

  • #4
    New Coder
    Join Date
    May 2012
    Posts
    21
    Thanks
    0
    Thanked 3 Times in 3 Posts
    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.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,638
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    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.

  • #6
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK here's the entire html for that page (it loads inside another).
    Code:
    <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:
    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;
    }

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,638
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    As I said: don’t use float and display: table-cell together. It must read:
    Code:
    #hiercont #hiercontcontent #hierarchyrel .hierarchyrelcontbox{
        display: table-cell;
    }

  • #8
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Attached Thumbnails Attached Thumbnails Link the height of divs-botrow.jpg  

  • #9
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    On a side note I'm not opposed to laying these out differently if there is a better way.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •