7 replies [Last post]
iamrick
Offline
newbie
Last seen: 15 years 1 week ago
Joined: 2004-12-07
Posts: 4
Points: 0

I'm sure you get lots of crys for help, so we will see how busy you guys are!

I'm trying to use this css design:
http://nemesis1.f2o.org/authors/weakley/final_right

With a footer that is always at the bottom of the page/browser window. I tried integrating this, but didn't have much luch:
http://scott.sauyet.name/CSS/Demo/FooterDemo1.html

I ended up with this, but its obviously quite terrible :?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>Two columns with color - Right sidebar variation</title>
	<style type="text/css" media="screen">

html, body, #container {
	min-height: 100%;
	width: 100%;
	height: 100%;
}

html>body, html>body #container {
	height: auto;
}

			#container		
			{
	
			position: absolute;
			top: 0;
  			 left: 0;
			margin: 0;
			background-color: #FFF;
			background-image:  url(images/background.jpg);
			background-repeat: repeat-y;
			border: 1px solid #333;
			background-position: right;
		}
		

		
		#header
		{
			background-color: #666;
			border-bottom: 1px solid #333;
		}
		
		#header h1
		{
			margin: 0;
			padding: .5em;
		}
		
		#menu 
		{background-color:#00FF99}
		
		#sidebar
		{
			float: right;
			width: 160px;
			margin-right: 10px;
			padding-top: 1em;
			
		}
		
		#sidebar p { margin-top: 0; }
		
		#content
		{
	

			margin-bottom: 5em;
			height: auto;
	
		}
		
		#content h2 { margin-top: 0; }
		

		
		
		#footer {
					clear: both;
								background-color: #666;

	position: absolute;
	bottom: 0;
	background-color: #ccffcc;
	width: 70%; /* See note below */
	text-align: center;
	padding: 0 15%;
}


	#footer {
		\width: 100%;
		w\idth: 70%;
	}

</style>
</head>
<body>
<div id="container">
	<div id="header">
		<h1>Site name</h1>
	</div>
	<div id="menu">
		<p>menu here</p>
	</div>
	<div id="sidebar">
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.
		</p>
	</div>
	<div id="content">
		<h2>
			Page heading
		</h2>
		<p>
			Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
		</p>
		<p class="nextbutton">
			<a href="JavaScript:history.back()">&lt; Back to tutorial</a>
		</p>
	</div>
	<div id="footer">
		Footer stuff here
	</div>
</div>
</body>
</html>

Thanks for youre help!

Rick.[/code]

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

2 Col Layout, Footer at bottom of page

This has just recently been discussed here: http://www.csscreator.com/css-forum/ftopic16424.html&highlight=

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

iamrick
Offline
newbie
Last seen: 15 years 1 week ago
Joined: 2004-12-07
Posts: 4
Points: 0

Ri

Right, yes... I see.

The thing is I'd be doing the same thing, trying to smash too bits of code together (and we've seen what I've done with that).

The layout I'm after is like this:

Header
Menu
Content | Sidebar
|
|
Footer

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: Ri

iamrick wrote:
The thing is I'd be doing the same thing, trying to smash two bits of code together (and we've seen what I've done with that).

Well, there's two ways of doing this:
1. someone does all the work for you and provides the layout as per your specifications;
2. you take the examples from the other thread as your starting point and just start with the basics - container, header & footer. Once you've got that right, then you can move on to adding your menu, two columns and your content, testing as you go to make sure everything's still right.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

iamrick
Offline
newbie
Last seen: 15 years 1 week ago
Joined: 2004-12-07
Posts: 4
Points: 0

2 Col Layout, Footer at bottom of page

The layout is a bit different no?

Its using a fixed... oh nevermind. Don't mean to sound like I'm sulking, but I was really just after a gentle nudge here or there after I've been slamming my head against the wall with this today Sad

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 56 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

2 Col Layout, Footer at bottom of page

In Scott's method, the entire page, everything but the footer goes into #main. You don't even have a #main by any name.

Look at this bare bones version of Scott's method.

When trying a new approach to something, it's a good idea to deconstruct it to the bare minimal code, and then add things in a bit at a time and watch what they do and what they break.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

iamrick
Offline
newbie
Last seen: 15 years 1 week ago
Joined: 2004-12-07
Posts: 4
Points: 0

2 Col Layout, Footer at bottom of page

Hi Guys,

I'm still having the problem in IE where the right sidebar div is wrapping underneath the left content div. Any idea of how to fix this?

Cheers,

Rick.

html,body,#wrapper {
	min-height:100%;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

html&gt;body,html&gt;body #wrapper {
	height:auto;
}

#wrapper {
	position:absolute;
	top:0;
	left:0;
	background:transparent url(someother.png) bottom right no-repeat;
}

body {
	background:#FFF url(some.png) top left no-repeat;
}

#footer {
	position:absolute;
	bottom:0;
	width:100%;
	text-align:center;
	height:49px;
	background-color:#99b8ff;
	clear:left;
}

#main {
	height:auto;
	background-color:#1f00ea;
	padding:0 0 3em;
}

#header {
	background-color:#285b62;
	height:97px;
}

#menu {
	height:32px;
	background-color:#ffa618;
}

#sidebar {
	background-color:#ff083d;
	overflow:auto;
}

#content {
	background-color:#3dff23;
	float:left;
	width:69%;
}

  <div id="wrapper">
    <div id="main">
      <div id="header">header</div>
	  <div id="menu">menu</div>

	  <div id="content">content goes here</div>
	  		<div id="sidebar">this navigation wraps around content! this navigation wraps around content! this navigation wraps around content!this navigation wraps around content! this navigation wraps around content!this navigation wraps around content!this navigation wraps around content!this navigation wraps around content! this navigation wraps around content!</div>
	  	  
    </div>

    <div id="footer">
      <p>footer</p>
    </div><!-- end footer -->
  </div><!-- end wrapper -->

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 56 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

2 Col Layout, Footer at bottom of page

Give it left margin wide enough to be clear of content.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.