It is in Chapter 9. A footer was added to the bottom and floats were incorporated so that nothing interferes with the footer. So, the footer shows up okay, but the positioning of the sidebars is screwed up. It is supposed to be a three column layout with both sidebars and content on the top.
It would be nice if I could show you an image of what this looks like, but this site won’t let me do that because it thinks it is spam. I will try to describe it the best I can. Instead of being a layout with a header and three columns on top with the footer on the bottom, it has the header and middle content div on top and the two sidebars are both on the bottom with lots of space above them. The footer is on the bottom as it should be.
Here is the code (this is not the whole code–this is the code I think would effect the layout):
Does anything look weird with the code above? If all of that looks right, then I can look and see if it is something else. I am seriously confuzzeled and frustrated. I appreciate the help–I am trying to learn this on my own. (:
Well we have no HTML to look at so I’ll try my best just from looking at the CSS.
I am assuming the HTML is all correct and the footer is outside the wrappre and the HTML is valid…try giving the #wrapper overflow:hidden; though that’s a poor guess based on your explanation.
I’d need to get your HTML too because I’m having trouble describing what you are saying, even though I’ve probably seen it a million times :).
You can get around the spam filter by posting your links without http://www.
The CSS code for content is here (I did not post in in my first post):
} Content {
margin: 0 240px 0 160px;
border: 1px solid #b9d2e3;
background-color: white;
color: black;
}
From the image it looks as though you have floated the left and right sidebars but not the center part.
If the center part is not floated then the left and right floats must come first in the html as only static content that follows a float will wrap around it.
Do you have the site online? If so it would be easier to debug.
In the html you posted above I didn’t see any html for #sidebar or #sidebar2. is there any chance you can post full html and CSS. You will probably be allowed to post links now that your past the 5 post limit but if not PM me the code and I’ll reproduce it here for others.
Edit:
I just edited your post and no I can see the code - I’ll get back to you in a minute
As I suspected you have your floated columns after the main static content which means that they will sit underneath. You would need to move the floats above the content in the html.
e.g.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home of the Hack</title>
<link href="HTML Utopia/css2-code/chapter08/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: #050845;
color: white;
background-image: url(web_site_files/02_creating_the_layout/img/bg.jpg);
background-repeat: repeat-x;
font: small Arial, Helvetica, sans-serif;
}
#wrapper {
background-color: #fdf8f2;
color: black;
margin: 30px 40px 30px 40px;
padding: 10px;
}
#sidebar2 {
float: left;
width: 159px;
border-top: 1px solid #b9d2e3;
border-left: 1px solid #b9d2e3;
border-bottom: 1px solid #b9d2e3;
background-color: white;
color: black;
margin: 0;
padding: 0;
top: 1px;
}
#main {
width: 100%;
margin-top: 10px;
}
#sidebar {
float: right;
width: 220px;
background-color: #256290;
margin: 0;
padding: 0;
color: white;
}
#content {
margin:0 230px 0 170px;
overflow:hidden;
}
* html #content {
height:1%;
overflow:visible
}
#footer{clear:both}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"> <img src="" height="77" width="203" />
<div id="header-bottom">
<p id="tagline">The Home of the Hack</p>
<ul>
<li><a href="#">Contact Us</a> | </li>
<li><a href="#">About Us</a> | </li>
<li><a href="#">Privacy Policy</a> | </li>
<li><a href="#">Sitemap</a> | <br />
</li>
</ul>
<div id="ball"> <img src="" height="24" width="20" alt="ball" /> </div>
</div>
<!--header-bottom-->
</div>
<!--header-->
<div id="main">
<div id="sidebar" >
<div class="inner">
<h3>Site Search</h3>
<form method="post" class="searchbutton" action="#" id="searchform">
<div>
<label for="keywords">Keywords</label>
<input type="text" class="text" name="keywords" id="keywords" />
</div>
<div class="searchbutton">
<input type="submit" class="btn" name="btnSearch" id="btnSearch" />
</div>
</form>
</div>
<div class="inner">
<h3>Coming Events</h3>
<ul>
<li><span class="date">10 Apr 06 -</span><br />
<a href="#">Seattle Zone Qualifier</a></li>
<li><span class="date">13 Apr 06 -</span><br />
<a href="#">Word Cup - Round 8</a></li>
<li><span class="date">21 April 06 -</span><br />
<a href="#">Footbag00M 05 - NY</a></li>
<li><span class="date">28 April 06 -</span><br />
<a href="#">WFPA AGM - Hong Kong</a></li>
<li><span class="date">3 March -</span><br />
<a href="#">World Cup - Round 9</a></li>
</ul>
</div>
<div class="inner">
<h3>Move of the Month</h3>
<h4>The Outer Stall</h4>
<img src="" alt="player demonstrating the outer stall move" height="110" width="60" class="motm-image" />
<p>Eti bibendum mauris nec nulla. Nullam cursus ullamcorper quam. Sed cursus vestibulum leo.</p>
<p class="more"><a href=" ">More</a></p>
</div>
</div>
<!--sidebar-->
<div id="sidebar2">
<div class="inner">
<ul id="nav">
<li><a href=" ">Freestyle</a></li>
<li><a href=" ">Tournaments</a></li>
<li><a href=" ">Results</a></li>
<li><a href="">Rules</a></li>
<li><a href="">Blog</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Forums</a></li>
<li><a href="">Organizations</a></li>
</ul>
<!--close nav-->
<h3>The BagBlog</h3>
<div id="bloglatest">
<h4>10 Apr 06</h4>
<p><a href=" ">A New Season: On the Road Again</a></p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent henrerit iaculis arcu.</p>
</div>
<!--bloglatest id-->
<ul id="blog">
<li>5 Apr: <a href="">Ouch...That Really Hurt</a></li>
<li>3 Apr: <a href="">Experimental Moves From Spain</a></li>
<li>29 Mar: <a href="">5 Ways to Lighten Up Training</a></li>
</ul>
<!--close blog list-->
<h3>Newsletter</h3>
<p>Get all the latest news, tips, results and new footbag products sign up to our free newsletter.</p>
<form method="post" action="" id="newsletterform">
<div>
<input type="text" name="email" id="newsletter-email" value="email@here" class="text" />
</div>
<div class="searchbutton">
<input type="submit" name="btnSubmit" id="newsletter-submit" value="SUBSCRIBE" class="btn" />
</div>
<!--searchbutton-->
</form>
</div>
<!--inner id-->
</div>
<!--sidebar2 id-->
<div id="content">
<div id="mainfeature">
<h2>Simon Says</h2>
<p>Simon Mackie tells us how a change of shoes has given him new moves and a new outlook as the new season approaches.</p>
<p class="more"><a href="#">Read More</a></p>
</div>
<!--mainfeature-->
<div class="inner">
<h2>Recent Features</h2>
<ul class="features">
<li>
<h3><a href=" ">Head for the Hills: Is Altitude Training the Answer?</a></h3>
<img src="" height="48" width="35" />
<p class="author">Lachlan "Super Toe" Donald</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
</li>
<li>
<p class="more"><a href="#">Full Story</a></p>
</li>
<li>
<h3><a href=" ">Hack up the Place: Freestylin' Super Tips</a></h3>
<img src="" height="48" width="35" />
<p class="author">Jules "Pony King" Sizemore</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
<p class="more"><a href="#">Full Story</a></p>
</li>
<li></li>
<li>
<h3><a href="">The Complete Black Hat Hacker's Survival Guide</a></h3>
<img src="" alt="Mark Harbottle" height="48" width="35" />
<p class="author">Mark 'Steel Tip' Harbottle</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
<p class="more"><a href="">Full Story</a></p>
</li>
<li>
<h3><a href="">Five Tricks You Didn't Even Know You Knew</a></h3>
<img src="" alt="Simon Mackie" height="48" width="35" />
<p class="author">Simon 'Mack Daddy' Mackie</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
<p class="more"><a href="">Full Story</a></p>
</li>
<li>
<h3> </h3>
</li>
<li></li>
</ul>
</div>
</div>
<!--content-->
</div>
<!--main-->
<div id="footer">
<p>Copyright 2006 - All Rights Reserved</p>
</div>
<!--close footer-->
</div>
<!--wrapper-->
</body>
</html>
I moved the sidebars above the content in the HTML. I thought it was a problem in the CSS at first. So, whatever is floated has to be above any static divs? Thanks so much. Glad I can post images now though!
Yes, the floated element must come first in the HTML. Which makes sense. If it wasn’t that way the float would just rise up to the top of the monitor and stay there lol
