CODEWITHSUNDEEP
csshtmlbackground
Mikael
Mikael

Reputation: 11

Making two column divs equal height

<div id="content">
  <div id="leftColumn">
    left column stuff
  </div>
  <div id="rightColumn">
    right column sidebar stuff
  </div>
</div>

When the left column is longer than the right, the right column's background image gets cut off. How do I make both columns the same height? (I tried applying a background image to the content div and it fixed the problem, but some pages don't use the sidebar so I'm trying to look for another solution).

the columns also can't be fixed height.

Upvotes: 1

Views: 16841

Answers (7)

paulalexandru
paulalexandru

Reputation: 9530

The problem is very simple:

First you have to add a class named "elements" to both columns so your html will look like this:

<div id="content">
  <div id="leftColumn" class="elements">
    left column stuff
  </div>
  <div id="rightColumn" class="elements">
    right column sidebar stuff
  </div>
</div>

After this, all you have to do is to compare the 2 heights, and aplay the maximum height to the smallest one. You do this like this:

$(document).ready(function () {
    var highestCol = Math.max($('#leftColumn').height(),$('#rightColumn').height());
    $('.elements').height(highestCol);      
});

Its a jQuery code witch calculate the maximum height between the 2 columns, and set them both with that height, resulting 2 columns with the same height. (the biggest one)

Upvotes: 1

tillinberlin
tillinberlin

Reputation: 439

i just came across this and saw there's no green tag on either answer yet.. Maybe one of these methods could help ->

http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

(some of it is already mentioned here - but i still find it a nice overview with pros and cons and lots of comments)

Upvotes: 1

Brent Friar
Brent Friar

Reputation: 10609

If you don't mind using jQuery, there is a plugin written specifically to address this issue.

http://plugins.jquery.com/project/equal-height-columns

Upvotes: 2

FelipeAls
FelipeAls

Reputation: 22161

If you don't care so much about IE6 and IE7, the simplest answer is setting

display: table-cell;

on each of your columns. Just check http://ie7nomore.com/css2only/table-layout/ for this pure CSS2.1 solution (both columns are contenteditable so you can easily add lines and lines of text in one and/or another column)
And no it isn't "using tables" as some may argue : the table value of the CSS property display renders the same way as a the HTML element table but it's still the semantic of a div (i.e. none) or whatever element it's applied to ;)

Then for IE6 and IE7, you can use conditional comments for a simple fallback (like applying background to one of the column and if the other is longer in some pages ... nevermind and forget it, it's old IE and your text is still readable)

Upvotes: 8

Vian Esterhuizen
Vian Esterhuizen

Reputation: 3904

Wrap them in a container div and define it as display:table-row, and the two children, define as display:table-cell;height:100%;. That's how I handled it here: heyvian.com/html5-css3 and if you add content in the contenteditable side you'll see how it works.

I doubt this works in ie6 or ie7 though. I haven't tested that page for those browsers.

Upvotes: 1

cp3
cp3

Reputation: 2139

Since some pages don't use a sidebar you can give and ID to your <body> tag and swap backgrounds that way. As far as a solution that works in all browsers, you're out of luck. I haven't found any.

#about-me { background: url(about.png) repeat-y; }
#contact { background: url(contact.png) repeat-y; }

<body id="about-me">

or

<body id="contact">

Upvotes: 0

dmackerman
dmackerman

Reputation: 2966

If you want both columns to be the same height, yet their contents are different lengths, you need to set the height of the divs. You are asking for it to be fluid and expand to their length -- yet you want them to be the same which is just not possible.

kjy112 offered a good solution with min-height, but they are correct in saying that it indeed does not work in IE6 or 7.

You may want to take a look at this article: http://css-tricks.com/fluid-width-equal-height-columns/

For another solution, you could try making the columns always expand to the column with the greatest height. Very good explanation of the problem here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Upvotes: 2

Related Questions