How to fix the height of this div

Question

enter image description here

My problem is that the border for the main div doesn't extend to the bottom of the window.

Here's the stylesheet:

body {
    margin:0px;
    padding:0px;
    background-color:#F7F7F7;
}

#nav {
    background-color:#F7F7F7;
    border-top:10px solid #89B7C4;
    height:45px;
    padding-top:20px;
    padding-left:200px;
    border-bottom:1px solid #7597A1;
}

#nav a {
    text-decoration:none;
}

#nav a:visited {
    color:#000;
}

#sidebar {
    float:left;
    padding:15px;
}

#main {
    float:left;
    border-right:1px solid #7597A1;
    width:800px;
    margin-left:200px;
    margin-top:0px;
    margin-bottom:0px;
    padding-top:10px;
}

Here's the page source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>home: index</title>
  <link href="/stylesheets/application.css?1305224655" media="screen" rel="stylesheet" type="text/css" />
  <script src="/javascripts/prototype.js?1304452925" type="text/javascript"></script>
<script src="/javascripts/effects.js?1304452925" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1304452925" type="text/javascript"></script>

<script src="/javascripts/controls.js?1304452925" type="text/javascript"></script>
<script src="/javascripts/application.js?1304452925" type="text/javascript"></script>
</head>
<body>

<div id="nav">
  #nav &middot;
  <a href="#">link1</a> &middot; <a href="#">link2</a> &middot; <a href="#">link3</a> &middot; <a href="#">link4</a>

</div>
<div id="main">
  #main<br><br>
  <br><br><br><br><br><br><br><br><br><br>
</div>


<div id="sidebar">
  #sidebar<br>
  <a href="#">link1</a> <br> <a href="#">link2</a> <br> <a href="#">link3</a> <br> <a href="#">link4</a>

</div>
</body>
</html>

I had to put breaks in main to see how the border would look. This is not ideal. I would like the border to display even if there's little to no content in the main div.

If you have any ideas on how to get it to extend all the way down to the bottom of the page, I'd really appreciate it.

Any other tips on cleaning up the CSS would also be appreciated.

@Mythje I've tried that, but it doesn't seem to do anything... — boo-urns, May 12 '11 at 18:33
what browser are you using and when you specified height:100% was in the css file or the html ? — VirtualTroll, May 12 '11 at 18:48

score 2 · Accepted Answer · answered May 12 '11 at 18:41

2

You have a classic equal height column problem. Here is just one of the many links to show you how to accomplish what you want: http://abcoder.com/css/css-equal-height-columns/

answered May 12 '11 at 18:41

vinhboy

8,542
7
34
44

score 1 · Answer 2 · answered May 12 '11 at 18:50

html,body
{
    height:100%;
}
body {
    margin:0px;
    padding:0px;
    background-color:#F7F7F7;
}

#nav {
    background-color:#F7F7F7;
    border-top:10px solid #89B7C4;
    height:45px;
    padding-top:20px;
    padding-left:200px;
    border-bottom:1px solid #7597A1;
}

#nav a {
    text-decoration:none;
}

#nav a:visited {
    color:#000;
}

#sidebar {
    float:left;
    padding:15px;
}

#main {
    float:left;
    border-right:1px solid #7597A1;
    width:800px;
    margin-left:200px;
    margin-top:0px;
    margin-bottom:0px;
    padding-top:10px;
    min-height:100%;
}

This is as close as I can come. Most credit goes to:

http://www.sitepoint.com/forums/css-53/automatic-div-height-fill-100%25-screen-height-158987.html

score 0 · Answer 3 · edited Dec 16 '15 at 04:25

This should be a good start:

#left {
    width: 14em;
    float: right;
}
#right {
    margin-right: 14em;
    border-right: 1px solid grey;
}

<div id="left"> 
    <ol> 
        <li>Lorem ipsum</li> 
        <li>Duis aute</li> 
        <li>Excepteur sint</li> 
        <li>Ut enim minim veniam</li> 
        <li>Lorem ipsum amet</li> 
        <li>Duis reprehenderit</li> 
        <li>Ut enim veniam</li> 
        <li>Ut enim veniam</li> 
    </ol> 
</div> 
<div id="right"> 
    <h1>Stretch the Background Color in a Two Column Layout</h1> 
    <p>The trick is to add the background color to the main container(in this case, id #canvas)<em>view the source for answer</em>.</p> 
    <div> 
        <h2>Lorem Ipsum</h2> 
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
    </div> 
</div>

The problem with that is the border is as long as the content in the `right` div. I'd like the border to appear even if there is no text in there and even if the window is longer than the content in that div. — boo-urns, May 12 '11 at 18:37
min-height: Xpx? Also, Will there ever be a case where the right div will not have content? Another way would be to create a 1px dot, repeat-y, then use position to move the line. — gutierrezalex, May 12 '11 at 18:40

score 0 · Answer 4 · answered May 12 '11 at 18:41

0

The main does not extend to the bottom of the window because its height is determined by the contents of the div. Just add more content and it will extend accordingly.

answered May 12 '11 at 18:41

Jawad

8,352
10
40
45

score 0 · Answer 5 · edited May 23 '17 at 10:32

0

Even height:100% won't work because the body, and even the html, are only as high as they need to be. So making the main just as high as them isn't going to work.

Most elements prefer to only take up as much height as its content needs. Unfortunately you will just have to set the height explicitly.

Also look at this question for how to do it with Javascript.

edited May 23 '17 at 10:32

Community

1
1

answered May 12 '11 at 18:42

Tesserex

17,166
5
66
106

score 0 · Answer 6 · answered May 12 '11 at 18:50

You could also insert the min-height property which will give the #main div a minimum height and will also remain in place. However keep in mind that content may overlap or hide because of your minimum height be aware to adjust the height accordingly

#main {min-height:500px}

How to fix the height of this div

6 Answers6