Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I achieve equal height divs (positioned side by side) with HTML / CSS ?

I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.

For example, the right div has a lot of content, and is double the height of the left div, how do I make the left div stretch to the same height of the right div?

Is there some JavaScript (jQuery) code to accomplish this?

like image 622
James Avatar asked Jun 29 '09 01:06

James


People also ask

How do I place two divs side by side the same height in CSS?

The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format.

How do I put two divs side by side in HTML?

With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.

How do I make two columns the same height in CSS?

Answer: Use the CSS3 flexbox With CSS3 flex layout model you can very easily create the equal height columns or <div> elements that are aligned side by side. Just apply the display property with the value flex on the container element and the flex property with the value 1 on child elements.


2 Answers

you can get it working with js:

<script>
    $(document).ready(function() {
        var height = Math.max($("#left").height(), $("#right").height());
        $("#left").height(height);
        $("#right").height(height);
    });
</script>
like image 134
Andi P. Trix Avatar answered Sep 21 '22 05:09

Andi P. Trix


I've seen many attempts to do this, though none met my OCD needs. You might need to dedicate a second to get your head around this, though it is better than using JavaScript.

Known downsides:

  • Does not support multiple element rows in case of a container with dynamic width.
  • Does not work in IE6.

The base:

base layout

  • red is (auxiliary) container that you would use to set margin to the content.
  • green is position: relative; overflow: hidden and (optionally, if you want columns to be centered) text-align: center; font-size: 0; line-height: 0;
  • blue display: block; float: left; or (optionally, if you want columns to be centered) display: inline-block; vertical-align: top;

So far nothing out of ordinary. Whatever content that blue element has, you need to add an absolutely positioned element (yellow; note that the z-index of this element must be lower than the actual content of the blue box) with this element and set top: 0; bottom: 0; (don't set left or right position).

base with absolute

All your elements now have equal height. For most of the layouts, this is already sufficient. My scenario required to have dynamic content followed by a static content, where static content must be on the same line.

enter image description here

To achieve this, you need to add padding-bottom (dark green) eq to the fixed height content to the blue elements.

enter image description here

Then within the yellow elements create another absolutely positioned (left: 0; bottom: 0;) element (dark blue).

enter image description here

Supposedly, if these boxes (yellow) had to be active hyperlinks and you had any style that you wanted to apply to the original blue boxes, you'd use adjacent sibling selector:

yellow:hover + blue {}

Here is a the code and demo:

HTML:

<div id="products">
    <ul>
        <li class="product a">
            <a href="">
                <p class="name">Ordinary product description.</p>
                <div class="icon-product"></div>
            </a>
            <p class="name">Ordinary product description.</p>
        </li>
        <li class="product b">
            <a href="">
                <p class="name">That lenghty product description or whatever else that does not allow you have fixed height for these elements.</p>
                <div class="icon-product"></div>
            </a>
            <p class="name">That lenghty product description or whatever else that does not allow you have fixed height for these elements.</p>
        </li>
        <li class="product c">
            <a href="">
                <p class="name">Another ordinary product description.</p>
                <div class="icon-product"></div>
            </a>
            <p class="name">Another ordinary product description.</p>
        </li>
    </ul>
</div>

SCSS/LESS:

#products { 
    ul { position: relative; overflow: hidden; text-align: center; font-size: 0; line-height: 0;  padding: 0; margin: 0;
        li { display: inline-block; vertical-align: top; width: 130px; padding: 0 0 130px 0; margin: 0; }
    }

    li {
        a { display: block; position: absolute; width: 130px; background: rgba(255,0,0,.5); z-index: 3; top: 0; bottom: 0;
            .icon-product { background: #ccc; width: 90px; height: 90px; position: absolute; left: 20px; bottom: 20px; }
            .name { opacity: 1; }
        }

        .name { position: relative; margin: 20px 10px 0; font-size: 14px; line-height: 18px; opacity: 0; }

        a:hover {
            background: #ddd; text-decoration: none;

            .icon-product { background: #333; }
        }
    }
}

Note, that the demo is using a workaround that involves data-duplication to fix z-index. Alternatively, you could use pointer-events: none and whatever solution for IE.

like image 20
Gajus Avatar answered Sep 21 '22 05:09

Gajus