Clear both problems

HTML & CSS
1

Hi guys.
I’ve been trying to solve this problem for hours now and still have no idea how to fix it.
According to the css code, my web page is supposed to have a white borderline around my floats.
When I load it to my computer’s server it shows, but when loaded to my internet’s server it disappears, leaving me only with a green background.

I’ve been trying to play with the “clear:both” (below the footer) and the “container” but no success. Can someone please explain to me how I can fix this.

css code:

body {
	background-color:#85a157;
	color:#000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 10px 10px;
	padding: 0px;
}
.clear{clear:both;}
* {
	margin: 0px;
	padding: 0px;
}
#container {
	margin: 0px auto;
	text-align: left;
	width: 717px;
}
a{
	font-size:12px;
}
p{
	margin: 15px 0px;
}
/********************** Header ***************************/
#header {
	margin: 0px 0px 0px 0px;
	background-image:url(images/mylogo.jpg);
	width:717px;
	height:288px;
	position:relative;
}
#header ul{
	background-color:#71874B;
	width:711px;
	border: 3px solid #FFFFFF;
	display:block;
	top:255px;
	position:absolute;
	margin: 0px 0px 0px 0px;
	height:22px;
	padding:5px 0px 0px 0px;
	text-align:center;
}
#header li{
	display:inline;	
}
#header ul a{
	text-decoration:none;
	color:#FFFFFF;
	margin: 0px 15px;
}
#header ul a:hover{
	text-decoration:underline;
	color:#28556b;
}
#logo_w1,#logo_w2 {
	font-size: 24px;
	font-style:italic;
	color:#FFFFFF;
	position:absolute;
}
#logo_w1{
	top:15px;
	left:70px;
}
#logo_w2{
	top:44px;
	left:94px;
}
#header_text {
	top:90px;
	left:43px;
	width:230px;
	position:absolute;
}
#header_text p{
	font-size: 18px;
	color:#FFFFFF;
}
#header_text a{color:#28556b;}
#header_text a:hover{color:#ffffff;}
/********************** Content ***************************/
#content {
	background-image:url(images/content_bg.gif);
	width:717px;
}
img{
	border-width:0px;
}
h1{
	color:#000000;
	font-size:14px;
	margin: 20px 0px 20px 0px;
}

h2{
	color:#85a157;
	font-size:14px;
	text-align:center;
	width:200px;
	margin: 10px 0px 15px 0px;
}
#left {
	float:left;
	width:210px;
	margin-left:27px;
	padding: 0px 10px 30px 0px;
	display:inline;
}
#left a{color:#28556b;}
#left a:hover{color:#c77e0c;}
#photos a{
	margin-right:14px;
}
#right {
	float:right;
	width:428px;
	padding: 0px 20px 20px 20px;
	margin-top:10px;
	border-left: #FFF 2px solid;

}
#right a{
	color:#c77e0c;
}
#right a:hover{
	color:#85a157;
}
/********************** Footer ***************************/
#footerline {
clear:both;
background-image:url(images/footer_bg.gif);
font-size:1px;
height:10px;
}
#footer {
	width:717px;
	text-align:center;
	padding: 20px 0px;
}

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <link href="style.css" rel="stylesheet"
 type="text/css" />
  <title>Charity template</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo_w1">Citizens Without</div>
<div id="logo_w2">Borders</div>
<div id="header_text">
<p>Travel the world while helping&nbsp;others.</p>
<a href="http://www.freewebsitetemplates.com">Join now !</a>
</div>
<ul>
  <li><a href="http://www.freewebsitetemplates.com">Home</a></li>
  <li><a href="http://www.freewebsitetemplates.com">Become
a Host</a></li>
  <li><a href="http://www.freewebsitetemplates.com">Become
a CWB</a></li>
  <li><a href="http://www.freewebsitetemplates.com">Recommendations</a></li>
  <li><a href="http://www.freewebsitetemplates.com">How</a></li>
  <li><a href="http://www.freewebsitetemplates.com">FAQ</a></li>
  <li><a href="http://www.freewebsitetemplates.com">Contact
us</a></li>
</ul>
</div>
<div id="content">
<div id="left">
<div style="text-align: center;"><br />
<h2>Find a Civilian Without Borders</h2>
<br />
<form action="civiliandatabase.php" method="post">Country:
  <select name="country">
  <option>---</option>
  <option>Brazil</option>
  <option>Canada</option>
  <option>Chile</option>
  <option>Ecuador</option>
  <option>England</option>
  <option>France</option>
  <option>Israel</option>
  <option>Mexico</option>
  <option>South Africa</option>
  <option>USA</option>
  </select>
  <p><input name="submit" value="Start search"
 type="submit" /> </p>
</form>
<br />
<hr line="-1" /><br />
<h2>Find a Host<br />
<br />
</h2>
<form action="hostdatabase.php" method="post">
  <div style="text-align: center;">Country:
  <select name="country">
  <option>---</option>
  <option>Brazil</option>
  <option>Canada</option>
  <option>Chile</option>
  <option>Ecuador</option>
  <option>England</option>
  <option>France</option>
  <option>Israel</option>
  <option>Mexico</option>
  <option>South Africa</option>
  <option>USA</option>
  </select>
  <br />
  <p><input name="submit" value="Start search"
 type="submit" /> </p>
  </div>
</form>
</div>
</div>
<div id="right">
<h1>Welcome to our social network</h1>
<div style="text-align: justify;">Looking
to give towards others in need all over the world, but dont know
how to find them?Tired of the complicated bureaucracy behind
international organizations? Looking to travel? Then this social
network could be the perfect opportunity for you.<font size="-1"><br />
<br />
Civilians Without Borders offers a chanal of
communication between
those who would like to help out and those who need help. If you need
help with any project, idea or kjl why not help can present their
project or need Our goal is to allow hostsIf you are a person that is
thinking of traveling, why bla not.</font></div>
<h1>Photos</h1>
<div id="photos"> <a href="index.html"><img
 alt="volunteer" src="IMG_civil_1.jpg"
 style="border: 0px solid ; width: 90px; height: 68px;" /></a>
<a href="index.html"><img alt="photo"
 src="IMG_civil_2.JPG"
 style="border: 0px solid ; width: 90px; height: 68px;" /></a><a
 href="index.html"><img
 style="border: 0px solid ; width: 90px; height: 68px;"
 src="IMG_home3.jpg" alt="photo" /></a><a
 href="index.html"><img
 style="border: 0px solid ; width: 90px; height: 68px;"
 src="IMG_home2.jpg" alt="photo" /></a></div>
</div>
<div id="footerline">g<br />
<br />
<br />
<br />
<br />
</div>
</div>
<div id="footer">Copyright © 2007 Charity Organization.
All rights reserved.</div>
</div>
</body>
</html>
2

:wink:
I found the problem: I haven’t slept in 2 days…

I accidentally uploaded my webpage and the main image into different folders which the css code did not link to.
Hope I didn’t waste too much of anyone’s time.

3

Glad you found the problem and welcome to Sitepoint :slight_smile: