2 replies [Last post]
stuboo
Offline
newbie
Last seen: 17 years 38 weeks ago
Joined: 2004-01-04
Posts: 2
Points: 0

Hello all:

Thanks in advance for your help. I know I will find the answer to my problem here.

I have just set up a 2 column site with a div box around everything. I have set the body height: 100% and the box div height: 100% but when the content is larger than the screen size, the box doesn't fill the entire content area (only 100% of the screen area).

I realize the explaination is a little goofy so here's some code . . .

/* CSS Document */

body {
	background-color: #f2f2f2;
	margin:0; 
	padding:0; 
	height:100%; 
	} 
	
h1 {
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	font-size: 32px;
	}

#box {
	border-right: dotted 1px #999999;
	border-left: dotted 1px #999999;
	position: absolute;
	top: 0px;
	left: 10%;
	width: 80%;
	height: 100%;
	padding: 10px;
	background-color: #ffffff;
	}
	
table.nav {
	border-top: solid 1px #999999;
	border-bottom: solid 1px #999999;
	padding: 3px 0px 3px 0px;
	background: #f2f2f2;
	}
	
div#main {
	border-right: dashed 1pw #999999;
	padding: 20px, 10px, 5px, 20px;
	position: absolute;
	top: 135px;
	left: 0px;
	width: 75%;
	height: 100%;
	font-family: garamond, times new roman, serif;
	font-size: 14px;
	line-height: 16px;
	}
	
p {
	color: #333333;
	}
	
div#right {
	padding: 20px, 10px, 5px, 10px;
	position: absolute;
	top: 135px;
	left: 75%;
	height: 100%;
	font-family: garamond, times new roman, serif;
	font-size: 14px;
	line-height: 16px;
	text-align: justified;
	}

And here's the file

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles/style_one.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="box"><img src="images/logo.gif" width="334" height="54" vspace="15"> 
  <table width="100%" align="center" cellpadding="3" cellspacing="0" class="nav">
    <tr> 
      <td align="center"><img src="images/archives_button.gif" width="81" height="26" border="0"></td>
      <td align="center"><img src="images/travels_button.gif" width="65" height="26"></td>
      <td align="center"><img src="images/365_button.gif" width="146" height="26"></td>
      <td align="center"><img src="images/gallery_button.gif" width="69" height="26"></td>
    </tr>
  </table>
  <div id="main"> 
    <h1>Article Heading</h1>
    <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>
    <p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi 
      egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum 
      purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, 
      accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum 
      aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet 
      elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class 
      aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
      hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum 
      nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget 
      purus.</p>
    <p>Sed ut metus sed wisi commodo viverra. Suspendisse dignissim elit ac leo. 
      Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit. Vestibulum 
      faucibus turpis at lacus. Nulla pede nibh, congue ac, luctus at, pharetra 
      ut, nulla. Nulla in ipsum eget tortor lobortis laoreet. Morbi molestie nibh 
      dapibus justo. Nulla sapien lorem, tincidunt sit amet, lobortis laoreet, 
      feugiat a, leo. Etiam id mauris in libero molestie dictum. Cras nisl diam, 
      dapibus ut, sollicitudin sed, auctor nec, orci. Nam eleifend, dui in dapibus 
      congue, mi diam luctus velit, eu imperdiet pede elit nec lorem. Proin laoreet, 
      eros a dictum faucibus, nunc wisi rhoncus nunc, at rhoncus lectus tellus 
      vitae urna. Curabitur a turpis at ligula lobortis cursus.</p>
  </div>
  <div id="right"> 
    <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>
  </div>
</div>
</body>
</html>

Thanks in advance.

stuboo

smaragd
Offline
newbie
Last seen: 17 years 38 weeks ago
Timezone: GMT+1
Joined: 2004-01-04
Posts: 2
Points: 0

Re: div height for entire page

Hi!

I commented out a little from your code and then it worked:

div#main {
   border-right: dashed 1pw #999999;
   padding: 20px, 10px, 5px, 20px;
   /*position: absolute;
   top: 135px;
   left: 0px;*/
   width: 75%;
   font-family: garamond, times new roman, serif;
   font-size: 14px;
   line-height: 16px;
   }

You decide how much you want to change with the code, but the problem was that you had that main div positioned.

stuboo
Offline
newbie
Last seen: 17 years 38 weeks ago
Joined: 2004-01-04
Posts: 2
Points: 0

thanks a million

thanks a million smaragd!

worked like a charm.

stuboo