Forums

brianatlarge

Here's the page:

http://studentseatfree.com/search.php?s ... query=flat

The box ad is running into the footer, but I don't know why my footer is ignoring the ad box.

HTML:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
<html>

	<head>
		<title>SEF Search Results</title>
		<meta http-equiv=\"Content-type\" content=\"text/html; charset=UTF-8\">
		<link rel=StyleSheet href=\"main_style.css\" type=\"text/css\">
		<script src=\"jquery.js\" type=\"text/javascript\"></script>
  <script type=\"text/javascript\"> 
  $(document).ready(function()
  {
	//for div
	 $(\"tr.contentbox:even\").css(\"background-color\", \"#f2fef2\");
	  $(\"tr.contentbox:odd\").css(\"background-color\", \"#daf2c8\");
  });
  </script>

	</head>
	<body>
	<div class=\"everything\">
		
	<div class=\"searchbox\"></div>
	
	<form class=\"searchformbox\" action=\"search.php?search_query=flat&amp;sort_type=restaurant_type\" method=GET>
		Sort by: <select name=\"sort_type\">
			<option value=restaurant_name selected>Restaurant Name
			<option value=restaurant_type>Restaurant Type
			<option value=discount_type>Discount Type
		</select>

		<input type=submit value=\"Sort\">
	
		<input type=text name=search_query value=\"flat\">
		<input type=submit value=\"Search\">
	</form>
	
	<div class=\"logobox\"></div>
	<div class=\"adtopbox\"></div>
	<div class=\"refine\">
		<div>Showing all coupons</div>

	</div>
	<div class=\"adbox\"></div>
	
	<div class=\"results\">
	&lt;&nbsp;1 &gt;	
	&nbsp;<a href=search.php>All Listings</a><br>
	</div>
	
	<table class=\"results\" border=0>
	<tr class=contentbox><td class=\"resultspadding\">Restaurant Type</td><td class=\"resultspadding\">Restaurant Name</td><td class=\"resultspadding\">Discount Type</td><td class=\"resultspadding\">Description</td></tr>

		<tr class=contentbox>
	<td class=\"resultspadding\">add auth test</td><td class=\"resultspadding\">Adamson's Wharf</td>
	<td class=\"resultspadding\">Flat</td><td class=\"resultspadding\">Gonna see if this dinglecheese updates!</td>
	</tr>
		<tr class=contentbox>
	<td class=\"resultspadding\">Chinese</td><td class=\"resultspadding\">Heough Yes!</td>

	<td class=\"resultspadding\">Flat</td><td class=\"resultspadding\">$3 off with student ID</td>
	</tr>
		<tr class=contentbox>
	<td class=\"resultspadding\">Date Test</td><td class=\"resultspadding\">The Roasting Company</td>
	<td class=\"resultspadding\">Flat</td><td class=\"resultspadding\">Friggin meow yes</td>
	</tr>

		<tr class=contentbox>
	<td class=\"resultspadding\">Deli</td><td class=\"resultspadding\">Douglas' Deli</td>
	<td class=\"resultspadding\">Flat</td><td class=\"resultspadding\">$5 off any purchase of $30 or more</td>
	</tr>
		<tr class=contentbox>
	<td class=\"resultspadding\">test</td><td class=\"resultspadding\">auth test</td>

	<td class=\"resultspadding\">flat</td><td class=\"resultspadding\">a;lsdfjkas;ldfjk</td>
	</tr>
		</table>
	<div id=\"footer\">
				<span id=\"footer_text\">
					&copy; Copyright 2008 StuckPixel Studio LLC &amp; Jaree Marketing LLC<br>

					All Rights Reserved<br>
					Hattiesburg, MS
				</span>
				<div style=\"float: right;\">
					<p>
						<a href=\"http://validator.w3.org/check?uri=referer\">
							<img src=\"http://www.w3.org/Icons/valid-xhtml10\" alt=\"Valid XHTML 1.0 Strict\" height=\"31\" width=\"88\">
						</a>
					</p>

				</div>
			</div>

	</div>
	</body>
</html>

CSS:

* { margin: 0; padding: 0; }

body
{
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;
}

.everything
{
background:url(images/bg.jpg);
background-position: center top;
background-repeat:repeat-y;
margin:0px auto;
width:999px;
display:block;
}

.searchbox
{
background:url(images/topgreen.jpg);
background-repeat:no-repeat;
height:30px;
width:999px;
}

.searchformbox
{
margin-top:-27px;
margin-left:30px;
}

.logobox
{
background:url(images/newlogo.jpg);
width:175px;
min-height:135px;
height:135px;
float:left;
display:inline;
margin-left:20px;
margin-top:10px;
}

.adtopbox
{
background:url(images/adtopholder.jpg);
width:730px;
min-height:90px;
height:90px;
margin-left:200px;
margin-top:20px;
}

.adbox
{
background:url(images/adboxholder.jpg);
width:300px;
min-height:250px;
height:250px;
float:right;
margin-right:70px;
margin-top:15px;
}

.contentbox
{
width:560px;
min-height:100px;
padding: 5px;
background-position: left top;
margin-left:30px;
}

.results 
{
margin-left:30px;
}

.resultspadding 
{
padding:5px;
}

.floatleft {
float: left;
margin: 0px 10px 10px 0px;
}

.refine
{
background-color:#eeeeee;
min-height:25px;
width:890px;
padding:5px;
margin-left:30px;
margin-top:40px;
background-position: center top;

}

/*Footer*/

#footer {
padding:10px 0px 70px 10px;
color:#0c0c0c;
width:951px;
background-color:#daf2c8;
font-size:9px;
text-align: left;
line-height:12px;
margin:35px auto 0px;
}

#footer img {
float:left;
margin-right:10px;
}

#footer span {
display:block;
float:left;
width:300px;
}

#footer a {
color:#9e8292;
text-decoration:none;
}

img {border:none}

Thanks.

cybershot

When you float your material, you need to clear the floats. Otherwise if one column is shorter than the other, the footer can move up to fill the space. Try adding a class to your css like this

.clear { clear:both; }

then after your the floated divs, just do this

<div class="clear"></div>

Try that. You can also google clearing floats. I chris has some of that in his series about wordpress, try watching that, it will open your eyes to alot.

I am not sure that is your problem, but that's what I think it is.

brianatlarge

Yep! That was it. Thanks so much!

treehouse : what would you like to learn today?

Forums

My footer is ignoring my flow!