how to get equal height for both left and right div column

@jasonc310771May 10.2015

I have been trying all sorts to get the columns to be the same height, but still nothing is working…

Is there something that I am missing that is so obvious to get this to work ?

I know I have placed the css in the html and it is best in its own stylesheet, but this is just so I could test the code out while trying different things out.

I have found a few sites that suggest using an overlay method where the right side overlays the background that is 100%. But this will not work for me as I wish to have rounded borders on both columns. Also when the page is reduce (responsive) I would like the right side column to drop underneath the left column.

[code] <!DOCTYPE html> <html lang=”en”> <head>

<style type=”text/css”> #container { width: 1300px; margin: 0 auto; padding: 0em; border: 0px solid #fff; }

#leftInner { float: left; width: 36%; min-width: 580px; max-width: 580px; background-color:#ffffff; border: 3px solid #22566B; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; padding: 5px; margin: 0px 5px 0px 5px; margin-bottom: 10px; }

#rightInner { float: left; width: 56%; min-width: 580px; max-width: 580px; background-color:#ffffff; border: 3px solid #22566B; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; padding: 5px; margin: 0px 5px 0px 5px; margin-bottom: 10px; }

.clearFloat { clear: both; }

</style>

<title>Home</title> </head> <body> <div id=”container”> <div id=”leftInner”> aaa<br> aaa<br> aaa<br> aaa<br> </div> <div id=”rightInner”> aaa<br> aaa<br> aaa<br> aaa<br> aaa<br> aaa<br> aaa<br> </div> <div class=”clearFloat”></div> </div> </body> </html> [/code]

to post a comment

CSS

8 Comments(s) _↴

@Kevin2May 10.2015 — #A little searching found this:

http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

Seems to be a bit less "hacky" than most other so-called solutions out there. It should be relatively easy to incorporate your borders, etc. into it. Adding media queries would take care of moving the right column under the left at smaller screen widths.

@kmoinuMay 10.2015 — #A few issues I noticed with your css:

- you don't need to have a min-width and a max-width if they are the same. Just do [code=html]{width:580px }[/code]

- having the min- and max- width set the same also negates the % width you have.

- [code=html]width: 36%; min-width: 580px; max-width: 580px; [/code] and [code=html]width: 56%; min-width: 580px; max-width: 580px;[/code] don't work together. You wind up with the width of 580px on both.

- setting a min-width of 580px would also make you scroll horizontally on a phone, unless you have a css set for smaller widths (which you should do).

- this[code=html]margin: 0px 5px 0px 5px;[/code] can be simplified to this [code=html]margin: 0px 5px;[/code]

- if you have 2 divs that share a ton of similarities, rather than do the code like this

[code=html]#leftInner {AAAA, XXXX, YYYY, ZZZZ}
 #rightInner {BBBB, XXXX, YYYY, ZZZZ}[/code]

do it like this

[code=html]
 #leftInner {AAAA}
 #rightInner {BBBB}
 #leftInner, #rightInner  {XXXX, YYYY, ZZZZ}[/code]

- finally, you have a width of 1300px for your container. That means that anything under that will make people have to scroll horizontally. Big no-no. A % width would be your friend here, using responsive changes as the screen gets smaller (look at the bottom of this post for more info on that). For example, rather than

[code=html]#container { width: 1300px; }
 #leftInner {width: 36%; min-width: 580px; max-width: 580px; }
 #rightInner { width: 56%; min-width: 580px; max-width: 580px;  }[/code]

This would be better

[code=html]#container { width: 100%; max-width: 1300px; }
 #leftInner {width: 36%;}
 #rightInner { width: 56%;}[/code]

On to your issue...

display the divs as blocks and give them a min-height, or a height attribute

[code=html]#leftInner, #rightInner { display:block; height:200px;
 float: left;
 background-color:#fff; 
 border: 3px solid #22566B;
 border-radius: 12px;
 -webkit-border-radius: 12px; 
 -moz-border-radius: 12px; 
 padding: 5px;
 margin: 0px 5px;
 margin-bottom: 10px; }[/code]

to make the right column drop, you need to figure out at what width you want that to happen. A pretty standard width is around 780. At the bottom of your css, after your styles used for your desktop browsing, add this (you can change the widths if you want to)

[code=html]@media all and (max-width : 779px) and (min-width : 0px)  {
 #leftInner, #rightInner {float:none; }
 }[/code]

@jasonc310771authorMay 10.2015 — #Thank you for your input on this, I shall check my CSS and update it as you have suggested.

As for the columns I'll try that out and see where I get.

Thanks again

@jasonc310771authorMay 10.2015 — #Thank you for this link, after checking it, it was something I tried to pull apart and use the main part of the code but found it did not allow me to have borders. Due to the overlay method used. Thanks all the same. A little searching found this:

http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

Seems to be a bit less "hacky" than most other so-called solutions out there. It should be relatively easy to incorporate your borders, etc. into it. Adding media queries would take care of moving the right column under the left at smaller screen widths.[/QUOTE]

@Kevin2May 10.2015 — #I stand corrected. Actually, before I posted my first response I wrote the code below to do some testing, coincindentally using much of [b]kmoinu[/b]'s suggestions (great minds think alike...). What got me started on searching was that I thought it was too hacky and there had to be a better way.

So it seems that percentages cannot be applied to [b]height:[/b] and [B]min-height:[/B] in CSS for block-level elements such as <div>. You have to hardcode them in pixels, [B]em[/B]s or whatever. Why? No answer. It is what it is. What that means in your situation is that you cannot have a central CSS file calling for the DIVs in question being hardcoded to 200px (kmoinu) or 600px (me) in height with content whose height fluctuates page-to-page, and that could happen based on screen width. What happens if one page has 1200px in content height in the left column but only 150px in the right? That being stated, if you can absolutely guarantee that your content's height will never go beyond X pixels or [B]em[/B]s either my code or kmoinu's code should work for you.

Interestingly, while most developers worry about screen width for responsive design ([b]@media only screen and (max-width: 735px)[/b] e.g.) you can also do the same with screen height. Theoretically, given enough media queries you can make your column heights match whatever screen height a user has. One example is in the code below.

[code=html]<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
 <title>Home</title>
 <style>
 #leftInner, #rightInner { display: inline-block; border: 3px solid #22566B; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; padding: 5px; margin: 0px 5px 10px 5px; min-height: 600px; vertical-align: top; }
 
 #leftInner { width: 36%; }
 
 #rightInner { width: 56%; }
 
 @media only screen and (max-height: 600px) {
 #leftInner, #rightInner { min-height: 550px;}
 }
 
 @media only screen and (max-width: 735px) {
 #leftInner, #rightInner { width: 90%; min-height:0px; margin: 0 auto 10px 5px;}
 }
 </style>
 </head>
 <body>
 <div id="leftInner">
 aaa<br>
 aaa<br>
 aaa<br>
 aaa
 </div>
 
  <div id="rightInner">
   aaa<br>
   aaa<br>
   aaa<br>
   aaa<br>
   aaa<br>
   aaa<br>
   aaa
  </div>
 </body>
 </html>[/code]

@cootheadMay 10.2015 — #Hi there jasonc310771,

[indent]

here is another possible solution to your problem...

[color=navy]
 &lt;!DOCTYPE html&gt;
 &lt;html  lang="en"&gt;
 &lt;head&gt;
 
 &lt;meta charset="utf-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 
 &lt;title&gt;untitled document&lt;/title&gt;
 
 &lt;style media="screen"&gt;
 body {
 background-color:#f0f0f0;
 }
 #container {
 display:table;
 }
 #left-col,#right-col {
 display:table-cell;
 width:45%;
 padding:1% 1.9%;
 background-color:#fee;
 border:1px solid #666;
 border-radius:10px;
 box-shadow:5px 5px 5px #999;
 }
 #right-col {
 background-color:#eef;
 }
 #middle-col {
 display:table-cell;
 width:1%;
 }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;div id="container"&gt;
 
 &lt;div id="left-col"&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
 ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
 amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
 faucibus felis. Vivamus at metus eget eros consequat fringilla. 
 Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
 tellus. Praesent felis tortor, scelerisque vitae fringilla 
 non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
 consectetur in nec lacus.
 &lt;/p&gt;
 &lt;/div&gt;
 
 &lt;div id="middle-col"&gt;&lt;/div&gt;
 
 &lt;div id="right-col"&gt;
 &lt;p&gt;
 Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
 lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
 ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
 euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu 
 et mauris scelerisque tristique. Donec fringilla mauris dolor, 
 sit amet vulputate lacus. Nulla feugiat mattis nulla non 
 tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis 
 nisi eget neque tempus facilisis eu quis sapien.
 &lt;/p&gt;&lt;p&gt;
 Ut et metus a massa rhoncus cursus. Integer luctus luctus enim, 
 tristique rhoncus enim feugiat eu. Etiam porttitor volutpat 
 massa sed congue. Sed eros nisl, volutpat ac dapibus quis, 
 ultricies id diam. Mauris at elit eget quam ullamcorper sagittis 
 ac vel lorem. Ut nec justo libero. Phasellus eget pharetra elit. 
 Proin viverra, neque non eleifend vehicula, nulla augue gravida 
 felis, non fermentum lorem odio ac nunc. Aliquam pretium 
 scelerisque consectetur. Proin ultrices urna non magna interdum 
 a sodales turpis suscipit. Mauris sollicitudin nisl ac arcu 
 sodales cursus. Maecenas bibendum neque vitae orci mollis ac 
 vulputate ante auctor. Sed sodales odio id ante sagittis 
 faucibus.
 &lt;/p&gt;
 &lt;/div&gt;
 
 &lt;/div&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;[/color]

[/indent]

[i]coothead[/i]

@jasonc310771authorMay 11.2015 — #Having a few issues with my internet connection today, but just got around to check the messages again and see the last message, which 'I Love', thank you very much coothead. I'll check the others as well and see which one fit best. But after giving the container a width and margin 0 so it would center in the page, I like it very much.

Thanks again.

p.s. I'll be using media query to change the container width based on the device used so the page should still work as expected.

@kmoinuMay 11.2015 — #You'll have to remove the table-cell display at smaller widths, otherwise you'll just have 2 super narrow columns, and the middle column becomes an issue. Add this to the bottom of your standard desktop css:

[code=html]@media all and (max-width : 779px) and (min-width : 0px)  {
 #middle-col {display:none;}
 #left-col,#right-col {display:inline-block; width:95%; margin:10px 0;}
 }[/code]

Also in #CSS _↴

CSS ul menu looks awful in IE5 & 6 Weird linking bug DIV Height, Width, and Centering

Success!

Help @jasonc310771 spread the word by sharing this article on Twitter...

Tweet This

how to get equal height for both left and right div column

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

how to get equal height for both left and right div column

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴