How to create dynamic horizontal layout in pure HTML/CSS no JS?

Question

Take a look at this example: http://jsbin.com/ixiju4/2/edit

I have a wrapper which height is defined and two containers inside: top and bottom. The height of the top container isn't fixed (in the example it is set to 100px but this is just for demonstration). What I want is to dynamically set the bottom container to fill the rest of the wrapper.

In this demonstration I did it using JS:

$(function() {
  var top = $('#top');
  var bottom = $('#bottom');
  bottom.height(bottom.parent().height()-top.outerHeight());
});

Do you think there is a way to do it in pure HTML/CSS? No matter how, I can even use tables. I've been thinking about the solution for some time now and haven't found any cross browser compatible one. Thanks for any help.

UPDATE 1: I've made one mistake defining this questions top has no fixed height - it is defined by it's content. http://jsbin.com/ixiju4/6

UPDATE 2: OK. This is what I really want: http://jsbin.com/ixiju4/8

Following your update I'm still confident that the underneath solution will work. If you want, you could set a min-height CSS property to at least keep a space in the event that something goes wrong with your dynamic content generation :) — Tiny Giant Studios
– Tiny Giant Studios, Commented Dec 17, 2010 at 15:11

Tiny Giant Studios · Accepted Answer · 2010-12-18 00:07:32Z

9

There's a pretty easy pure CSS solution to this:

#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  #top {
    height: 100px;
    width: 100%;
    background-color: #00f4f7;

  }
   #bottom {
    background-color: #00f400;
    width: 100%;
    height: 100%
  }

UPDATE 2 Following on from your last round of editing to the question, I've updated the CSS accordingly, which is:

#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #top {
    background-color: #00f4f7;   
  }

  #bottom {
    background-color: #00f400;
    height: 100%;
    padding: 10px;
  }

  #inner {
    height: 100%;
    background-color: #f0f400;
    margin-bottom: 10px;
  }

edited Dec 18, 2010 at 0:07

answered Dec 17, 2010 at 12:55

Tiny Giant Studios

1,1353 gold badges12 silver badges27 bronze badges

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

4 Comments

kapa Over a year ago

If you put an overflow: hidden on #wrapper it is even nicer.

Tiny Giant Studios Over a year ago

Hehehe, thanks - I wish I had moments of clarity like this all the time :)

Maciej Over a year ago

I doubt this solution makes sense: jsbin.com/ixiju4/11 #bottom would be 100% height of the #wrapper and it must be #wrapper.height - #top.height

Tiny Giant Studios Over a year ago

Based on the question you asked, it worked perfectly. The comment you made above, however, seems to indicate the criteria is changed. Perhaps rephrase what you want the HTML/CSS to do - you've edited the question several times over, only saying "this is what you want".

Boldewyn · Accepted Answer · 2010-12-17 12:58:37Z

0

Well, if you can use tables:

<table style="height:400px">
  <tr>
    <td style="height:100px">Fixed to arbitrary value</td>
  </tr>
  <tr>
    <td style="height:auto">Dynamically filling</td>
  </tr>
</table>

http://jsbin.com/ixiju4/3

Disclaimer: Dear Googler, if you found this answer: Don't do this at home! Tables for styling are evil. Use display: table and display: table-row to achieve the same effect in everything but IE < 8

Edit 2: OK, for completeness:

#wrapper { display: table; }

#top, #bottom { display: table-row; }

Doesn't work in IE < 8, as mentioned. http://jsbin.com/ixiju4/5

Edit 3: I was really blind. Yes, Tiny Giant Studios answered with the obvious way to do it. You should go with his answer. (I'm leaving mine for completeness.)

edited Dec 17, 2010 at 12:58

answered Dec 17, 2010 at 12:44

Boldewyn

83.1k45 gold badges161 silver badges218 bronze badges

4 Comments

jgradim Over a year ago

Please, please, please: avoid at all costs using tables for layouts - tables are for tabular data, and that's it. Also, using the style attribute - that's no good, either.

Boldewyn Over a year ago

@jgradim: Cool down. The OP seems to be in urgent need, says explicitly that he is fine to use tables for styling and you can't provide a better solution (CSS3 grid doesn't count), as far as I can see.

jgradim Over a year ago

My appeal was not a critique to the answer - instead, an appeal to the author. Sorry if misunterstood :)

Boldewyn Over a year ago

OK, then we are on common ground. The only excuses I can think of for tables for styling are email templates and intranet apps for IE6 with a tight deadline.

Collectives™ on Stack Overflow

How to create dynamic horizontal layout in pure HTML/CSS no JS?

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related