Can I make height 100% work like width 100%?

Question

I have two <div>s floated left inside a <section>. I am looking for the simplest way to get whichever <div> is shorter, in this case <div id="one"> to stretch its height to match the other (<div id="two">). In the fiddle, you will see that <div id="one"> has a gray background, which I want to continue down to the bottom of the <section>. Any workarounds or whatever to get this done is great. But I don't want to use javascript to do this. Thanks.

HTML:

<section>
    <div id="one"><p>Lorem</p></div>
    <div id="two">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore</p>
    </div>
    <div class="clear"></div>
</section>

CSS:

section {
    width: 80%;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#one, #two {
    float: left;
    width: 50%;
}
#one {
    background: rgb(230,230,230);
}
.clear {
    clear: both;
}

Is floating mandatory as the positioning tool? Are the widths of the columns known and fixed? — Jon, Feb 28 '13 at 20:54
@Jon I would like to keep them floated, but your right, it would be an easy solution to make the `
`s `display: table-cell;` or something. — dezman, Feb 28 '13 at 20:57
@Jon / others, What would you suggest as far as alternatives to the `float: left;` — dezman, Feb 28 '13 at 21:08
You've already suggested the best option: display: table/table-cell. — cimmanon, Feb 28 '13 at 21:12
@watson Using `float:left` is the best way to layout your document. Using `display:table-cell` is an ugly hack. You should just use Javascript if it's important that heights match. — Chuck Le Butt, Feb 28 '13 at 21:12
@DjangoReinhardt Except for the part where JavaScript is entirely unnecessary for achieving equal height columns. — cimmanon, Feb 28 '13 at 21:13
Also, using extra markup to clear your floats is pretty janky. — cimmanon, Feb 28 '13 at 21:16
@cimmanon how do you do it then, with `:after` or something? — dezman, Feb 28 '13 at 21:19
@watson cimmanon is probably a fan of the clearfix hack. There's nothing "janky" about using markup to clear your floats, especially if it makes things easier to read. — Chuck Le Butt, Feb 28 '13 at 21:21
possible duplicate of [How to make a floated div 100% height of its parent?](http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent) — Chuck Le Butt, Feb 28 '13 at 21:24
Markup *should* be separated from presentation, if you're going to throw in empty divs advertising that you're clearing floats, you may as well go around using classes like "float-left". http://www.quirksmode.org/css/clearing.html or http://nicolasgallagher.com/micro-clearfix-hack/ — cimmanon, Feb 28 '13 at 21:27
@cimmanon Clearfix is a HACK, and is therefore subject to all kinds of issues. Read more here: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ It's still being "patched" by people to try and sort these issues out, too: http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php Personally I don't like using hacks. I want to know that when I write something, it's going to look the same in all browsers from now on. The best way to do that is to avoid hacks. — Chuck Le Butt, Feb 28 '13 at 21:50
@DjangoReinhardt You're the only one who seems to think it is a hack. Browser inconsistencies are not a good litmus test for determining whether or not something is a hack. — cimmanon, Feb 28 '13 at 22:01
Hmm. You'd better inform Google then: http://i.stack.imgur.com/fOOQl.gif — Chuck Le Butt, Feb 28 '13 at 22:09

Ingo · Answer 1 · 2013-02-28T21:19:31.107

1

load jquery and add the following javascript

$(document).ready( function() {
    var x = $("#one").css('height');
    var y = $("#two").css('height');

    if(x > y) {
        $("#two").css('height', x);
    } else {
        $("#one").css('height', y);
    }
});

but incase you are allergic to JavaScript ... and would accept CSS3 you could try

section {
    display: flex;
    width: 80%;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#one, #two {
    display: flex;
    width: 50%;
    display: table-cell;
}

edited Feb 28 '13 at 21:19

answered Feb 28 '13 at 21:01

Ingo

1,805
18
31

1

I don't really want to use javascript to do this, but thanks :) – dezman Feb 28 '13 at 21:03
1

@watson, You should specify that in your question, then. This is a perfectly valid answer that works perfectly: http://jsfiddle.net/YDdKt/ – Chuck Le Butt Feb 28 '13 at 21:10
1

He updated his question to state no javascript, however he still has `Any workarounds or whatever to get this done is great` – Ben Felda Feb 28 '13 at 21:11
1

@Django Reinhardt, it would be if I had jQuery or Javascript in my tags. – dezman Feb 28 '13 at 21:11
As Ben Felda pointed out, when i answered you asked for Any workarounds or whatever.... without mentioning that JavaScript is illegal *shrug* – Ingo Feb 28 '13 at 21:13
2

@watson What are you talking about? You've only shown us snippets of your document and a JSFiddle -- there's no way for someone to know what you have an aversion to Javascript. We're not psychic! – Chuck Le Butt Feb 28 '13 at 21:15

score 0 · Accepted Answer · answered Mar 01 '13 at 06:37

Here is a pure HTML and CSS solution for you. It uses a div with a class of "inner" to wrap your divs you want to match up. Some CSS is also added to make it behave like you want it to.

jsFiddle solution - pure HTML and CSS

HTML code:

<section>
<div class="inner">
    <div id="one">
        <p>Lorem</p>
    </div>
    <div id="two">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
            doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
            veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
            ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
            consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque
            porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
            adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore</p>
    </div>
</div>
<div class="clear"></div>

score -1 · Answer 3 · answered Feb 28 '13 at 21:06

-1

You can hack around the padding on the p in the #one div, but this will throw your text off in this div. I'm not sure how relevant it is with aligning to the other text, but it may help you out.

#one p {
padding: 9em;

}

answered Feb 28 '13 at 21:06

bntrns

454
1
8
16

This is not really what I am going for. The answer needs to be reusable. – dezman Feb 28 '13 at 21:08

Can I make height 100% work like width 100%?

3 Answers3