0

There is the following simple structure:

<div id="container">
   <div id="header">...</div>
   <div id="menu">...</div>
   <div id="content">...</div>
   <div id="footer">...</div>
</div>

I need that menu and content have got the same height, but I can't set in as constant. I set "min-height" for the both items as "600px", but now "content" is more than 600px, but "menu" has got 600px. How can I fix it?

user2218845
  • 1,081
  • 4
  • 16
  • 21
  • This is one of the oldest problems in the book. Please search before posting. For example [How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?](http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh) – Boaz Apr 11 '13 at 19:19
  • I search but I've got nothing – user2218845 Apr 11 '13 at 19:20
  • I'm afraid that you can't do this without JavaScript/jQuery (in case that you want to have `menu` and `content` stacked vertically). – Miljan Puzović Apr 11 '13 at 19:32
  • @MiljanPuzović Sure you can: http://codepen.io/cimmanon/pen/JrGLm – cimmanon Apr 11 '13 at 19:54
  • @cimmanon I meant in case that he want to set equal heights of elements that are stacked vertically in layout (one on top of another), not side by side. – Miljan Puzović Apr 11 '13 at 20:07
  • @MiljanPuzović Why would you assume that's what the OP wants? The most common reason to have a "menu" and a "content" element be the same height is if they're side by side. – cimmanon Apr 11 '13 at 20:23
  • That's the point. We can only assume without details. – Miljan Puzović Apr 11 '13 at 20:29

2 Answers2

0

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)

Another method (a visual trick) is the technique of faux-columns

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
0

I used display: inline-block, is this what you are looking for?

http://jsfiddle.net/SMxRs/1/

#header, #menu, #content, #footer {
 width: 600px;
 height: 500px;
 background: #ccc;
 padding-left: 10px;
 display: inline-block;
}
#container {
width: 2500px;
 }
Cam
  • 1,884
  • 11
  • 24