1 reply [Last post]
prnoct90
Offline
newbie
Last seen: 10 years 1 day ago
Timezone: GMT+9
Joined: 2009-12-10
Posts: 1
Points: 2

I am working a website. And I'm having an issues. The website extends beyond the page. I have the header set to 100% width. I think it has to do with the character container I have. Is there anyway to deal with this? I can't change the innerwrapper to much, because it allows the character div to extend to the bottom of the content and page all of the time. This keeps anything from ever going over in the white area. Thanks in advanced.

http://172.31.0.246/~Paul/test/

index.html





<div id="wrapper">
<?=SITE_NAME?>
<div id="character"></div>
<div id="innerwrapper"> 
<div id="header">
This is header content.
</div>
<div id="content">
<p>This is content.</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
</div>
<div id="spacer1"> 
</div> 
</div> 
</div>



style.css

/* Global */
* {
	padding: 0em;
	margin: 0em;
}

html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	background: url('images/background.gif') repeat-y #E78700;
	font-family: tahoma, helvetica, sans-serif;
	font-size: 8pt;
	color: #492802;
}

#wrapper {
	width: 100%;
	height: 100%;
}

#innerwrapper {
	position: relative; /*** Let's be nice to IE ***/
	width: auto; /*** Content Width ***/
	display: table; /*** For non-IE browsers ***/
	height: 100%;
	width: 100%;
	margin-right: 219px;
}

#innerwrapper {
	height: auto;
	min-height: 100%;
}

#spacer1 {
	width: 100%;
	clear: both;
}

/* Common elements */


/* Layout (Every page) */
#character {
	width: 219px;
	height: 100%;
	min-height: 574px;
	background: url(images/character.png) no-repeat;
	float: left;
}

#header {
	width: 100%;
	min-width: 800px;
	height: 179px;
	background: url('images/header.gif') repeat-x;
}
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

width: 100%; margin-right:

	width: 100%;
	margin-right: 219px

Can't have 100% width and a margin that makes for greater than 100%. 100% is a computation and computed to pixels based on parent width or viewport; at a 100% it's as wide as it can possibly be unless you add to that with border, padding or margins then it will overflow the viewport/element area.

Altogether I see far too many width:100% statements it isn't necessary to state this property width;100% is the default behaviour of block level elements, but by not stating it you leave option for stating margins and in turn reducing that width to accommodate margins without extending beyond 100%.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me