CSS - Popping Up Content Outside Of A Scrollable Div

Hi.

I'm having a funny problem where using 100% height makes the content div scrollable, even when there's no actual content in it.

I am trying to make my content div be 100% height of the window size, so I have the following css:
Code:

html, body
{
	background: #FFFFFF;
	margin: 0px;
	padding: 0px;
	height: 100%;
	font-family: Trebuchet MS, Helvetica, sans-serif;
}

#wrapper
{
	background: #FFFFFF;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0px auto;
}

#header
{
	background-image: url("images/h-bg.png");
	background-repeat: repeat-x;
	margin: 0px auto;
	padding: 0px;
	width: 960px;
	height: 107px;
}

#header .logo
{
	margin-left: 10px;
}

#header .bg_l
{
	float: left;
}

#header .bg_r
{
	float: right;
}

#nav
{
	background-image: url("images/n-bg.png");
	position: relative;
	margin: 0px;
	width: 100%;
	height: 143px;
	text-align: center;
}

#nav a
{
	float: left;
	outline-style: none;
	width: 240px;
	height: 156px;
}

#nav_btn_wrapper
{
	width: 960px;
	margin: 0px auto;
}

#content
{
	position: relative;
	background-image: url("images/c-bg.png");
	background-repeat: repeat-y;
	width: 930px;
	height: 100%;
	margin: 10px auto 0px auto;
	padding: 10px 15px 0px 15px;
	font-size: 12pt;
}

As you can see I have height: 100% in every parent element from container up.
Without the height set to 100%, the container div just cuts off, which is bad because I'm using a glowy background on it, and it just cuts off abruptly.
I have used this method before on another design, but it worked only cos the wrapper and the container were both white, so when the container chopped off, the wrapper would continue, and it would look seemless.

See www.landmarkmeds.com to see the problem in action.
I have tried to remove the margin on the content div, but that only moved it up a bit.
Also, looking at it in firebug, it reports the height as the correct value, and even shows the ruler down to the bottom of the browser window. Why then it allows me to scroll I don't know!

I'm sure it's something stupid I've missed, but please help!

hello all,

i recently tried to implement a layout which fills the available screenspace, with the main content area as scrolling box.

I thought i succeeded, because firefox shown no problem, but when looked in IE, IE is very slow to render it, making it just unusable.
I've been looking for a way around ,but i'm out of luck so far, so i thought i'd seek advise on this forum. Maybe you can tip me in the right direction !

An image is worth a thousand words, so please have a look at the attached image, it summarizes the screen structure.
As you can see, the only scrollable area is the center orange zone : "viewport".

thank you for your time and help !
Alexandre

Hi everyone,

This is about to drive me to
If you look at this page you will see the problem right away:
cant post my url: See forum rules - well I'll be...
Why is the name, address ect.. out side of my wrap?
When I get rid of the <div id="wrapper"> it doesn't do it, but then I cannot get the whole page to center.


my css for the page:
Code:

@charset "UTF-8";
/* CSS Document */

#header { text-align:center;
}
#footerlinks{ text-align:center;
}
#contact{ text-align:center;
}
#copyright{ text-align:center;
}

#wrapper {
	width:960px;
	margin:0px auto;
	
	padding:15px;
	background-color:#ffffff;
	
	}

My form css:
Code:

@charset "UTF-8";
/* CSS Document */

form {font-family:"Trebuchet MS", Verdana, sans-serif;width:25em}
h2 {margin:0 0 0 0;padding:0}
p {margin:0 0 1em 0;padding:0;font-size:90%}
fieldset {background:#C361D2;border:none;margin-bottom:1em;width:24em;padding-top:1.5em}

p.legend {background:#794f9e;color:black;padding:.2em .3em;font-size:1.2em;border:2px outset #794f9e;position:relative;margin-bottom:-1em;width:10em;margin-left:1em;margin-top:1em}

#personal {background:#b57fe1;border:outset #b57fe1;}

#tours{background:#b57fe1;border:outset #b57fe1;}

#message {background:#b57fe1;border:outset #b57fe1;}



#personal label {position:absolute;font-size:90%;padding-top:.2em;left:20px}
#personal input {margin-left:9em;line-height:1.4em;margin-bottom:.2em;}

#choices label {position:absolute;padding-top:.2em;left:20px}
select {margin-left:0em;margin-bottom:0}


#size {font-size:90%}
#size input {margin-left:9em}
#size input + input {margin-left:1em}
#size br+ input {margin-left:9em}

#extras {font-size:90%}
#extras input {margin-left:9em}
#extras input +input {margin-left:1em}
#extras br+input {margin-left:9em}


textarea {font:.8em "Trebuchet MS", Verdana, sans-serif;width:29em;padding:.2em}

input[type="submit"], input[type="reset"] {background:#794f9e;font:1.2em "Trebuchet MS", Verdana, sans-serif}

#buttons {text-align:center}

My source code:

cant post cuz of urls n stuff - If you wouldn't mind helping me out pm me and I can send you the link and you can see this weirdness.

edit--> url is at http://lawofattractionfrequency.com

this is my code

PHP Code:
<?php
// XML file
$file = "http://www.wired.com/news/feeds/rss2/0,2610,12,00.xml";

// set up some variables for use by the parser
$currentTag = "";
$flag = "";
$count = 0;

// this is an associative array of channel data with keys ("title",
//"link",
//"description")
$channel = array();

// this is an array of arrays, with each array element representing an
//<item> // each outer array element is itself an associative array 
// with keys ("title", "link", "description")
$items = array();

// opening tag handler
function elementBegin($parser, $name, $attributes)
{
    global $currentTag, $flag;
    $currentTag = $name;
    // set flag if entering <channel> or <item> block
    if ($name == "ITEM")
    {
  $flag = 1;
    }
    else if ($name == "CHANNEL")
    {
  $flag = 2;
    }
}

// closing tag handler       
function elementEnd($parser, $name)
{
    global $currentTag, $flag, $count;
    $currentTag = "";

    // set flag if exiting <channel> or <item> block
    if ($name == "ITEM")
    {
  $count++;
  $flag = 0;
    }
    else if ($name == "CHANNEL")
    {
  $flag = 0;
    }
}

// character data handler
function characterData($parser, $data)
{
    global $currentTag, $flag, $items, $count, $channel;
    $data = trim(htmlspecialchars($data));
    if ($currentTag == "TITLE" || $currentTag == "LINK" ||
$currentTag ==
"DESCRIPTION")
    {
  // add data to $channels[] or $items[] array
  if ($flag == 1)
  {
      $items[$count][strtolower($currentTag)] .=
$data;
  }
  else if ($flag == 2)
  {
      $channel[strtolower($currentTag)] .= $data;
  }
    }

}

// create parser
$xp = xml_parser_create();

// set element handler
xml_set_element_handler($xp, "elementBegin", "elementEnd");
xml_set_character_data_handler($xp, "characterData");
xml_parser_set_option($xp, XML_OPTION_CASE_FOLDING, TRUE);
xml_parser_set_option($xp, XML_OPTION_SKIP_WHITE, TRUE);

// read XML file
if (!($fp = fopen($file, "r"))) 
{
      die("Could not read $file");
}

// parse data
while ($xml = fread($fp, 4096)) 
{
    if (!xml_parse($xp, $xml, feof($fp))) 
    {
  die("XML parser error: " .
xml_error_string(xml_get_error_code($xp)));
    }
}

// destroy parser
xml_parser_free($xp);

// now iterate through $items[] array
// and print each item as a table row
$i = 0;

foreach ($items as $item)
{

if ($i > 2)
{
break;
}


    echo "<tr><td><a href=" . $item["link"] . ">" . $item["title"] .
"</a><br>" . $item["description"] .  "</td></tr>";

$i++; 

}
?>




this is the part that generates what parts of the RSS you see, and the links...

PHP Code:
// now iterate through $items[] array
// and print each item as a table row
$i = 0;

foreach ($items as $item)
{

if ($i > 2)
{
break;
}


    echo "<tr><td><a href=" . $item["link"] . ">" . $item["title"] .
"</a><br>" . $item["description"] .  "</td></tr>";

$i++; 

}
?> 





How can I get the links displayed to pop in a new window, much like this...

PHP Code:
<a href="http://www.google.com/" target="_new"> This will pop in a new window(RAPP) ... 





basically, make the headers(which are links), to do _new window

For some reason (therefore contradicting my thread title) the horizontal scroll bar keeps popping up on my site. I've gone through and checked the width of all my divs and everything seems to be checking out.

Here is the site

university square condos (dot) com

Any idea where I could be going wrong?