CSS Alternative To This CSS-jQuery Code?

Question

I have two columns side by side that are different colors. The background has a unique color as well. The right column contains text that will expand to an unknown height. The other column contains little to nothing.

<div id="container">
    <div id="leftColumn">
        <p>Only one small paragraph here</p>
    </div>

    <div id="rightColumn">
        <p>Many large paragraphs inside here.</p>
    </div>
</div>

I would like the left column to be the exact height as the right column.

Here's the CSS...

#leftColumn {
    display:inline-block;
    width: 200px;
}
#rightColumn {
    display:inline-block;
    width: 600px;
    vertical-align: top;
}

So when the page loads I use jQuery to set the height of the left column based on the height of the right column.

$(document).ready(function() {
    $('#leftColumn').css('height', $('#rightColumn').innerHeight());
});

Is there a way to do this with only CSS?

CSS may not be the only tool for the job when other tools lend themselves better to a problem. HTML Tables aren't evil; although they might have been overused in the past before good CSS support, Tables still have their place. When you're talking equal heights, Tables automatically have that and can still be controlled through CSS, for a hybrid solution using best of both worlds. Otherwise it can get complicated fast if using one tool to exclusion of others for the sake of it. — John K
– John K, Commented Jan 31, 2010 at 3:45
Then again author did ask for a CSS only solution so maybe trying to enforce our ideals to the exclusion of directly answering the question is working against the process. — John K
– John K, Commented Jan 31, 2010 at 4:06

Lance McNearney · Accepted Answer · 2010-01-31 03:49:24Z

4

There are a few other ways to achieve this layout besides using Javascript.

Methods include:

Using display:table on the elements
Faux columns (background image on the parent element)
Adding multiple div containers for each background
Use a table (not very popular for obvious reasons)

All of these have different advantages, drawbacks and each introduces thier own headaches to the development of the site. I'd vote for using faux columns because it keeps the html the simplest and is compatible with all browsers.

Additional reading:

edited Jan 31, 2010 at 3:49

answered Jan 31, 2010 at 3:37

Lance McNearney

9,5304 gold badges52 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jitendra Vyas Over a year ago

what are cons to use display:table on a div?

Lance McNearney Over a year ago

@Jitendra - IE 6/7 doesn't support display:table.

user182666 Over a year ago

Thanks for that nice list of options. I'll have to consider what's going to be best for my design. Options three looks like something that might work well. The faux columns also looks good, but I'm not sure if I want to deal with the box-model differences between IE and other browsers.

Itay Moav -Malimovka · Accepted Answer · 2010-01-31 03:28:00Z

0

it can be done easily with <table>

answered Jan 31, 2010 at 3:28

Itay Moav -Malimovka

53.8k68 gold badges198 silver badges292 bronze badges

7 Comments

rossipedia Over a year ago

Unless he's displaying tabular data, that's Bad Idea (tm)

Itay Moav -Malimovka Over a year ago

@Bryan Ross - Doing loops in the air to achieve something with a simple & existing tool is usually a bad idea in programming. Besides, divs are even less semantic than tables.

John K Over a year ago

Yes, easily done with table + enhanced with sensible CSS to achieve the desired outcome.

user182666 Over a year ago

As easy as using tables would be, I don't think I'm going to go that route. Just going off what I've read - tables are for data. Browsers interpret the table tag as something specifically designed for data. By using tables for something other than data, you either a) tie the hands of browser developers OR b) risk having your site break because a browser developer decided to render tables differently in the future. Plus disregard for the W3C results in things like IE.

rossipedia Over a year ago

The real solution should be an update to CSS than handles height like width. Either an extension or another value to the height attribute. Until then we make do. And @Itay Moav, how exactly are divs less semantic? He wants to "divide" the page into two columns.

|

jessegavin · Accepted Answer · 2010-01-31 03:34:17Z

0

I am not sure if there's a pure CSS way to do this (maybe in CSS3). But you should read this article and see if it works for you.

http://www.alistapart.com/articles/fauxcolumns/

If not, you could consider this technique (which requires a LOT of silly markup).

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

answered Jan 31, 2010 at 3:34

jessegavin

75.8k28 gold badges141 silver badges165 bronze badges

1 Comment

Gabriele Petrioli Over a year ago

+1 for the second link .. it does not have a lot of silly markup .. an extra wrapping div per column ..

Collectives™ on Stack Overflow

CSS Alternative To This CSS-jQuery Code?

3 Answers 3

3 Comments

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related