3 replies [Last post]
Haywood
Haywood's picture
Offline
newbie
Last seen: 13 years 4 weeks ago
Timezone: GMT-6
Joined: 2009-01-02
Posts: 2
Points: 0

I have been banging my head against the wall for a few hours trying to get this worked out. I am trying to have the container div "main" be the full height of the screen if its contents is less than the screen (which is working right now), and also expand to be the size of its contents of there is more than a screen's worth. The 2nd part is what I can't figure out, when you scroll down to see the rest of the pages contents the "main" div does not continue along with the contents.

Any ideas? Sorry if the CSS is not very elegant, I'm still learning. Thanks in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=us-ascii" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
/*<![CDATA[*/
<!--
html, body {
    background: #696969;
    height:auto;
    height: 100%;
    min-height: 100%;
    margin-top: 0px;
    font: 1.0em/1.0em georgia, serif;
}
 
#main {
    margin-left: auto;
    margin-right: auto;
    border-left: #000000 solid 2px;
    border-right: #000000 solid 2px;
    width: 975px;
    height: 100%;
    padding: 0px;
    background: #00ff00;
}
 
#content {
    padding: 20px 10px 10px 10px;
}
 
#contentBox1 {
    line-height: 120%;
    margin-left: 50px;
    width: 410px;
    float: left;
    background: #ff0000;
}
 
 
#contentBox2 {
    line-height: 120%;
    margin-right: 50px;
    width: 410px;
    float: left;
    background: #0000ff;
}
-->
/*]]>*/
</style>
</head>
 
<body>
  <div id="main">
    <div id="contentBox1">
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
      foo<br />
      bar<br />
    </div>
    <div id="contentBox2">
      foo<br />
      bar<br />
      foo<br />
      bar<br />
    </div>
  </div>
 
</body>
</html>

Triumph (not verified)
Anonymous's picture
Guru

You defined the height, what

You defined the height, what do you expect? Take out the height:100% from #main.

Then when it disappears remember to contain your floats.

Haywood
Haywood's picture
Offline
newbie
Last seen: 13 years 4 weeks ago
Timezone: GMT-6
Joined: 2009-01-02
Posts: 2
Points: 0

Triumph wrote:You defined

Triumph wrote:

You defined the height, what do you expect?

I expected that 100% meant it's height would be 100% of the page, not 100% of the screen. I was obviously wrong about that.

Triumph wrote:

Then when it disappears remember to contain your floats.

How would I go about doing that? If someone could give me an example I would really appreciate it.

Haywood

--edit--

I found this article and it helped a lot. I removed width: 100% per triumph and added overflow: auto, the combination of those fixed my problem. Thanks,

Haywood

Triumph (not verified)
Anonymous's picture
Guru

Haywood wrote:... and added

Haywood wrote:

... and added overflow: auto, the combination of those fixed my problem. ...

You may want to go with overflow: hidden;