1. Home
  2. Forums Index
  3. Browser Side / CSS 6:05 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Height of DIV should change when content grows

         

Basman

9:04 am on Oct 12, 2007 (gmt 0)

10+ Year Member



I've got a page with some divs. All seems to be okay, apart from the div#menu that should have the same height as the div#content (when the content changes, the height of the div#menu has to change too).

I think this is an 'overflow' or 'clear' issue, but I just can't figure it out.

This is my html: 


<body>
<div id="container01">
<div id="container02">
<div id="linksboven"></div>
<div id="rechtsboven"></div>
<div id="foto"></div>
<div id="container03">
<div id="content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
 <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
</div>
<div id="menu"></div>
<div id="bottom">
<div id="linksonder"></div>
<div id="rechtsonder"></div></div></div>
</div>
</div>
</body>

This is the css-file: 


@charset "utf-8";
/* CSS Document */
body {
background-color:#333;
margin:0px;
}
div#container01 {
display:block;
margin: 0px auto;
position:relative;
width:900px;
border: 6px solid #fff;
background-color:#a88700;
overflow:auto;
}
div#container02 {
display:block;
position:relative;
left:50px;
top:0px;
width:844px;
float:left;
background-color:#FFF;
border-left-width: 6px;
border-left-style: solid;
border-left-color: #fff;
overflow:auto;
margin:0px auto;
}
div#linksboven {
display:block;
float:left;
width:500px;
background-color:#069;
height:28px;
}
div#rechtsboven {
display:block;
float:left;
width:338px;
background-color:#cc0081;
height:28px;
margin-left:6px;
}
div#foto {
display:block;
float:left;
width:844px;
height:240px;
margin-top:6px;
background-image: url(../../../images/back/foto/foto01.jpg);
background-repeat: no-repeat;
}
div#container03 {
overflow:auto;
float:left;
}
div#content {
display:block;
float:left;
width:640px;
margin-top:6px;
margin-right:6px;
background-color:#eee;
}
div#menu {
display:block;
position:relative;
float:left;
width:198px;
margin-top:6px;
background-color:#a88700;
height:100%;
}
div#bottom {
float:left;
position:relative;
width:844px;
margin: 0 auto;
}
div#linksonder {
float:left;
width:338px;
background-color:#cc0081;
height:28px;
margin-top:6px;
bottom:0px;
}
div#rechtsonder {
float:left;
width:500px;
background-color:#069;
height:28px;
margin-left:6px;
margin-top:6px;
bottom:0px;
}

Any tips? Thanks!

vincevincevince

9:09 am on Oct 12, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I generally solve this by using a background image on the parent DIV, 1px high and as wide as needed, so that it provides the background colour and right border for the #menu DIV.

This means it APPEARS to be the full height of the parent div, despite the real #menu div stopping short.

Basman

9:21 am on Oct 12, 2007 (gmt 0)

10+ Year Member



Haven't thought of that.

I tested it and it works. Instead of an image i've used a background-color #fff for the div#container03 and gave the div#content and div#menu a white border-top of 6 px. I also gave the div#bottom a white background.

It looks nice, but i'm still wondering if there a 'overflow' or 'clear' solution to this problem.

Many thanks for your help!

vincevincevince

9:27 am on Oct 12, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Your solution is fine, so long as the menu is not longer than the content.

Basman

12:27 pm on Oct 12, 2007 (gmt 0)

10+ Year Member



I solved it!

1. I put the div#bottom out of the div#container03 and tossed it under the container03. The div#container03 now only holds div#content and the div#menu

2. The div#container03 gets a position:relative and I removed the overflow:auto

3. The div#menu gets a position:absolute and right:0px.

The height:100% of the div#menu stretches out the div#menu to the border of div#bottom. The position of the div#bottom depends on the div#content. More content moves the div#bottom downwards and automatically stretches div#menu.

Finally i played with some margins to get the 6 pixels white line.

And it's pure css! I love it ;-)

The code: 


@charset "utf-8";
/* CSS Document */
body {
background-color:#333;
margin:0px;
}
div#container01 {
display:block;
margin: 0px auto;
position:relative;
width:900px;
border: 6px solid #fff;
background-color:#a88700;
overflow:auto;
}
div#container02 {
display:block;
position:relative;
left:50px;
top:0px;
width:844px;
float:left;
background-color:#FFF;
border-left-width: 6px;
border-left-style: solid;
border-left-color: #fff;
overflow:auto;
margin:0px auto;
}
div#linksboven {
display:block;
float:left;
width:500px;
background-color:#069;
height:28px;
}
div#rechtsboven {
display:block;
float:left;
width:338px;
background-color:#cc0081;
height:28px;
margin-left:6px;
}
div#foto {
display:block;
float:left;
width:844px;
height:240px;
margin-top:6px;
background-image: url(../../../images/back/foto/foto01.jpg);
background-repeat: no-repeat;
}
div#container03 {
width:844px;
float:left;
position:relative;
margin-top:6px;
}
div#content {
display:block;
float:left;
width:640px;
margin-right:6px;
background-color:#eee;
}
div#menu {
display:block;
position:absolute;
right:0px;
width:198px;
background-color:#a88700;
margin-bottom:6px;
height:100%;
}
div#bottom {
float:left;
display:block;
position:relative;
width:844px;
margin: 0 auto;
margin-top:6px;
}
div#linksonder {
float:left;
width:338px;
background-color:#cc0081;
height:28px;
bottom:0px;
}
div#rechtsonder {
float:left;
width:500px;
background-color:#069;
height:28px;
margin-left:6px;
bottom:0px;
}

And the html: 


<body>
<div id="container01">
<div id="container02">
<div id="linksboven"></div>
<div id="rechtsboven"></div>
<div id="foto"></div>
<div id="container03">
<div id="content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
 <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
</div>
<div id="menu"></div></div>
<div id="bottom"><div id="linksonder"></div>
<div id="rechtsonder"></div></div>
</div>
</div>
</body>

vincevincevince

1:06 pm on Oct 12, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I tried your code, it's a very elegant solution; but I often have pages where the menu is much longer than the content... would be interesting to see you find CSS which will handle that situation without breaking.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 6:05 am May 2, 2026