Member Avatar for louie540

Well hey there.

I've been trying to redo the layout of my website by having the page stretch across the whole screen instead of something like 960px. I've also made it so that my height stretches to 100%. Along with my main content div, I'm trying to get my sidebar and footer to cooperate with me which is becoming complete utter horse****.

I'm finding this really impossible to do right, especially after adding the XHTML doctype. I did have the divs position as relative, but after adding the doctype it just ignored the 100% height so I had to change it to absolute which has created many more problems, but it would at least allow the divs stretch vertically.

My current problem now is that the footer won't go underneath the content and sidebar properly. I want it to be below everything but it has a huge gap. I really am feeling like I'm far off from what I should be doing.


Main CSS

html {
	height: 100%;

}

body {
	min-height: 100%;	
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	background: #000;
	margin: 0;
	padding: 0;
	color: #CCC;
	overflow-x: hidden;

}
.content {
	background-color: #222;
	padding: 5px;
	position: relative;
	width: 100%;
	height: 100%;
	float: left;
	position: absolute;
		
}
.sidemenu {
	background-color: #111;
	padding: 5px;
	width: 250px;
	height: 100%;
	position: absolute;
	margin-top: -5px;
	margin-left: 80%;
	
}
.footer {
	margin-left: -5px;
	margin-bottom: 0;
	margin-top: 100%;
	padding: 5px;
	height: 210px;
	background-image: url(http://metalgearplanet.com/Images/Background/footer.jpg);
	background-color: #111;

}
.headerleft {
	background:url(http://metalgearplanet.com/test/Images/header-left.png) no-repeat left top;
	height: 209px;
	
}
.header {
	background:url(http://metalgearplanet.com/test/Images/header-middle.gif) repeat-x left top;
	height: 209px;
	max-width:1920px;
	min-width: 960px;
	background-color: #073444;
	
}
.headerright {
	background:url(http://metalgearplanet.com/test/Images/header-right.png) no-repeat right top;
	height: 209px;
	z-index: -999;

}

.menu {
	position: absolute;
	margin-top: -35px;
	width: 1024px;
	margin-left: 10px;

}

#content2 {
	width: 80%;
	float: left;
	
}

Main Content

<!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" lang="en" xml:lang="en">
<head>
<title>Metal Gear Planet</title>

<link rel="stylesheet" type="text/css" href="sheets/style.css"/>
<link rel="stylesheet" type="text/css" href="http://metalgearplanet.com/test/sheets/navcss.css"/>

</head>


<body>
		<div class="header"><div class="headerleft"><div class="headerright"></div></div></div>	
		
		<div class="menu">
			<ul id="nav">
				<li><a href="../index.php">Home</a></li>
				<li><a href="../news/">News</a></li>
				<li><a href="#">Walkthroughs</a>
							<ul>
								<li><a href="../walkthroughs/mgs1/intro.html">Metal Gear Solid 1</a></li>
								<li><a href="../walkthroughs/mgs2/intro.html">Metal Gear Solid 2</a></li>
								<li><a href="../walkthroughs/mgs3/intro.html">Metal Gear Solid 3</a></li>
								<li><a href="../walkthroughs/mgs4/intro.html">Metal Gear Solid 4</a></li>
							</ul>
				</li>
				<li><a href="#">Videos</a>
							<ul>
								<li><a href="../walkthroughs/mgs1/more/video.html">Metal Gear Solid 1</a></li>
								<li><a href="../walkthroughs/mgs2/more/video.html">Metal Gear Solid 2</a></li>
								<li><a href="../walkthroughs/mgs3/more/video.html">Metal Gear Solid 3</a></li>
								<li><a href="../walkthroughs/mgs4/more/video.html">Metal Gear Solid 4</a></li>
							</ul>
				</li>
				<li><a href="#">Hints</a>
							<ul>
								<li><a href="../walkthroughs/mgs1/more/hints.html">Metal Gear Solid 1</a></li>
								<li><a href="../walkthroughs/mgs2/more/hints.html">Metal Gear Solid 2</a></li>
								<li><a href="../walkthroughs/mgs3/more/hints.html">Metal Gear Solid 3</a></li>
								<li><a href="../walkthroughs/mgs4/more/hints.html">Metal Gear Solid 4</a></li>
							</ul>
				</li>
				<li><a href="../downloads/">Downloads</a></li>
				<li><a href="../downloads/">Affiliates</a></li>
			</ul>
		</div>
		
	<div class="content">
			<div class="sidemenu">
					<p>Hello there</p><img src="http://metalgearplanet.com/Images/Background/sidevideo.jpg" />
					
			</div>
	 		
			<div id="content2">
				<h1>What the fuck</h1>
				<p>JHlasdklj asdjlksafjskld sfjl;asd asdjl; asdjkalsd asjdl;smdas sadljas dadjl asdkj</p>
				
			</div>
			<div class="footer"><p>Hi</p></div>					
	</div>

</body>
</html>
Edited by louie540 because: n/a
  • 2 Contributors
  • 2 Replies
  • 192 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by louie540
Member Avatar for Fortinbra

I'm a little confused as to what you're trying to do.

Are you talking about making it fit the width of the browser, or the height of the browser?
In your CSS you're using pixels for widths, which will cause a horizontal scroll bar if the browser is smaller than those widths. I almost always ignore my height properties, and let my content dictate the height.

I'd recommend starting with positioning, using float and clear, then adjust height and width from there. Just remember that if you have multiple items side by side (or top to bottom), that the total of all of them is 100%. So with 3 columns wide you'd set 25%,50%,25%.

Member Avatar for louie540

I have been getting confused myself.

All I want is for my content to be next to by menubar that extends all the way down to the footer without any problems. But every time I try something new or fix it, something else comes up.

But right now, the only issue I seem to be having is with this footer. I just can't get it to go directly under the content without the gap. I'll have to try what you suggested.

Edited by louie540 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.