Auto Adjust Div Height

HTML & CSS
1

I want the div that’s on the right side to match the height of the div that’s on the left. The div on the right should always be the same height as the div on the left. The div on the left auto adjust its height. I want both divs to always have the same height. A picture is worth a thousand words so please take a look at the picture below.

Here’s the image that explains my problem.



JSFIDDLE

2

Hello, JohnCSSS. Welcome to the forums.

The jsfiddle code indicates that you need to learn to write basic HTML. There are simply too many tags missing or mismatched throughout and others that are incorrectly located. Basic HTML is a prerequisite to creating a working web page.

I recommend that you invest a few minutes in yourself and at least read an HTML primer.

You can search the forum for something like “equal height columns” and find some copy-n-paste code that will probably work, IF you understand how to correctly substitute your code into it.

3

Welcome to the forums, John.

Ronpat is right. Structure is CRUCIAL when coding.

Also “equal height” is not natural in CSS, you kind of have to fake it ( and be aware of the limitations of faking it). 4 basic ways of achieving columns:

<div class="cont">
  <div class="col left"> l</div> 
   <div class="col center">c </div> 
<div class="col right"> r</div>  
</div>
  1. If you know the widths of the columns. A then have have a container with vertically repeating bg image
  2. You could also nest containers and use margins to position the content columns , tho that’s adding a lot of wrappers for presentation only.
  3. If your columns are a solid color, and you need 3 or less, and your left and right columns are some fixed value ( not %) , you can use border-left/right on the container as the bg color , then use negative margins to position the side columns. over the container’s border.
  4. if you dont care about IE9 or lower:
.cont{ display: table; width:100%; } 
.col{ display: table-cell;  }

in this case .cont would indicate a row of columns. You can adjust the width of each column (%,em, px, etc. ) by targeting a separate rule ( .left, .right, . center… do note that with display:table; you aren’t limited to 3 cols)

That’s a general basic overview. Hope it helps.

4

John,

The following code uses the table/table-cell method to construct equal height columns. I chose this because it is the easiest. The page should render similarly to your intent. I did not do anything with the </a> because there was no opening tag.

This is not a great example, but it is valid and works back to IE8.

You seriously need to reconsider the importance of HTML on your pages. CSS can overcome some crummy HTML but cannot be guaranteed to do so consistently across all browsers. The only thing that works best cross-browser is valid code. That’s just the way it is. The kicker is that, as dresden_phoenix said, the structure of the HTML has to be viable. One can write perfectly valid code that will not render a useful page. They go hand-in-hand with effective CSS to produce quality pages.


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>2 Equal Height Columns</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1175835-Auto-Adjust-Div-Height
Thread: Auto Adjust Div Height
2013.11.01 17:26
JohnCSSS

HTML Validator:  http://validator.w3.org/
CSS Validator:  http://jigsaw.w3.org/css-validator/
-->
    <style type="text/css">
.outer {
    display:table;
    margin:0 auto;
}
.inside {
    display:table-cell;
    vertical-align:top;
    width:700px;
    border-right:1px solid #ddd;
    border-left:1px solid #ddd;
    background-color:#fed;    /* TEST Background Color */
    padding-bottom:15px;
}
.inside + .inside {
    width:310px;
    border-left:0;
    background-color:#def;    /* TEST Background Color */
}
.title {
    width:300px;
    height:20px;
    background:#2c2c2c;
    color:#fff;
    font-size:18px;
    padding-top:3px;
    padding-bottom:7px;
    margin-top:125px;
}
.section {
    color:#657b83;
    font-size:28px;
    padding-left:30px;
    padding-bottom:15px;
    margin-bottom:1px;
}
.subheading {
    font-size:50px;
    height:100px;
}
.bottom {
    width:1053px;
    border-top:1px solid #ddd;
    color:#fff;
    font-size:15px;
    text-align:center;
    padding-top:20px;
    padding-bottom:10px;
    margin:0 auto;
}
ul {
    list-style:none;
    width:300px;
}
.item {
    border-bottom:1px solid #ddd;
    overflow:hidden;
    padding-bottom:10px;
    margin-top:20px;
}
img {
    display:block;
    margin:1em 0;
}
.item img {
    display:inline-block;
    vertical-align:middle;
}
.item h3 {
    display:inline-block;
    vertical-align:middle;
    font-size:20px;
    padding-left:15px;
}
h2 {
    border-bottom:1px solid #ddd;
}
    </style>
<!-- Conditional code so IE8 will recognize HTML5 tags compliments of Stomme poes -->
<!--[if lte IE 8]>
  <script>
    var list='nav,time,article,section,footer,header'.split(','),el;
    while( el=list.pop() ){
      document.createElement(el);
    }
  </script>
<![endif]-->
</head>
<body>

<div class="outer">
    <section class="inside">
        <h2 class="subheading">Grumpy Cat</h2>
        <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" alt="Grumpy Cat" height="396" width="700">
        <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" alt="Grumpy Cat" height="396" width="700">
        <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" alt="Grumpy Cat" height="396" width="700">
    </section>
    <section class="inside">
        <p class="title">Funny</p>
        <ul>
            <li class="item">
                <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" alt="Grumpy Cat" width="100" height="67">
                <h3>Grumpy Cat</h3>
            </li>
        </ul>
    </section>
</div>

</body>
</html>

PS: An ID cannot be used more than once on a page.

5