Home/ Questions/Q 8413807
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T00:59:48+00:00

Assume following html page: <html> <head></head> <body> <div id=wrapper> <div id=header/> <div id=navigation/> <div

  • 0

Assume following html page:

<html>
 <head></head>
 <body>
  <div id="wrapper">
   <div id="header"/>
   <div id="navigation"/>
   <div id="leftcolumn"/>
   <div id="content/>
   <div id="footer"/>
  </div>
 </body>
</html>

What I’m trying to achieve is that the leftcolumn div and the content div always have the same height. Sometimes the leftcolumn div is higher than the content div because there is little content and vice versa: when there is a lot of content, the content div is higher than the leftcolumn div.

The situation as it is now produces some lay-out shenanigans because the body background, leftcolumn background and content background are all in a different colour.

This is my CSS as-is:

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #FFFEE9;
}

#wrapper {
    margin: 0 auto;
    width: 900px;
    height: auto;
}

#content {
    float: left;
    color: #006350;
    background: #DEE3DC;
    height: 100%;
    display: inline;
    width: 730px;
}

#contents {
    margin: 35px;
}

#contents h1, h2 {
    padding-bottom: 15px;
}

#contents p {
    padding-top: 5px;
    padding-bottom: 5px;
}

#header {
    color: black;
    width: 900px;
    float: left;
    height: 160px;
    background: #FFFEE9;
    margin-top: 10px;
}

#navigation p {
    padding: 3px;
}

#footer {
    width: 900px;
    height: 40px;
    clear: both;
    color: white;
    background: #83422D;
    font-size: 80%;
}

#footer a {
    color: white;
    text-decoration: none;
}

#footer p {
    padding: 4px;
}

#navigation {
    float: left;
    width: 900px;
    height: 25px;
    color: white;
    background: #83422D;
}

#navigation a {
    text-decoration: none;
    color: white;
}

#navigation a:hover {
    text-decoration: underline;
}

#leftcolumn {
    color: white;
    background: #006350;
    height: 100%;
    width: 170px;
    float: left;
}

#leftcolumn a {
    text-decoration: none;
    color: white;
}

#leftcolumn a:hover {
    text-decoration: underline;
}

#leftcolumn li {
    padding-bottom: 10px;
}

#leftcolumn ul {
    margin-left: 20px;
    margin-top: 20px;
    list-style: none;
}

.centered {
    text-align: center;
    margin: auto;
    display: block;
}

#gallery {
    height: 300px;
    width: 650px;
}

#gallery img {
    margin-right: 50px;
    margin-top: 50px;
}

#gallerytext {
    width: 400px;
    font-size: 75%;
    color: black;
    position: relative;
    margin-left: 155px;
    margin-top: -100px;
    text-align: justify;
}

I’ve tried using a combination of CSS styles like height: 100%, height:inherit, height:auto,... on the different divs (wrapper, leftcolumn and content) but I can’t seem to get the result I want. Bottom line: what CSS styles should I use if I want the leftcolumn and content div have the same height, regardless of which one is higher at that time. (And without using javascript please).

JsFiddle example where the leftcolumn is larger: http://jsfiddle.net/CQPnF/4/

Example where the content is larger: http://jsfiddle.net/BQkme/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can get your desired results with the use of display:table-cell rather float in your left and right panels :-

    I have removed float from your #content & #leftcolummn and gave them display:table-cell; and its working fine as per your requirement.

    UPDATED CSS

    * {
    padding: 0;
    margin: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #FFFEE9;
}

#wrapper {
    margin: 0 auto;
    width: 900px;
    overflow:hidden;
}

#content {
    color: #006350;
    background: #DEE3DC;
    display:table-cell;
    width: 730px;
}

#contents {
    margin: 35px;
}

#contents h1, h2 {
    padding-bottom: 15px;
}

#contents p {
    padding-top: 5px;
    padding-bottom: 5px;
}

#header {
    color: black;
    width: 900px;
    float: left;
    height: 160px;
    background: #FFFEE9;
    margin-top: 10px;
}

#navigation p {
    padding: 3px;
}

#footer {
    width: 900px;
    height: 40px;
    clear: both;
    color: white;
    background: #83422D;
    font-size: 80%;
}

#footer a {
    color: white;
    text-decoration: none;
}

#footer p {
    padding: 4px;
}

#navigation {
    float: left;
    width: 900px;
    height: 25px;
    color: white;
    background: #83422D;
}

#navigation a {
    text-decoration: none;
    color: white;
}

#navigation a:hover {
    text-decoration: underline;
}

#container {
    border:1px solid red;
    overflow:hidden;

}

#leftcolumn {
    color: white;
    background: #006350;
    width: 170px;
    display:table-cell;
}

#leftcolumn a {
    text-decoration: none;
    color: white;
}

#leftcolumn a:hover {
    text-decoration: underline;
}

#leftcolumn li {
    padding-bottom: 10px;
}

#leftcolumn ul {
    margin-left: 20px;
    margin-top: 20px;
    list-style: none;
}

.centered {
    text-align: center;
    margin: auto;
    display: block;
}

#gallery {
    height: 300px;
    width: 650px;
}

#gallery img {
    margin-right: 50px;
    margin-top: 50px;
}

#gallerytext {
    width: 400px;
    font-size: 75%;
    color: black;
    position: relative;
    margin-left: 155px;
    margin-top: -100px;
    text-align: justify;
}

    see the demo :- http://jsfiddle.net/BQkme/10/

    • 0