Forum Moderators: not2easy
The problem is appearing in the #content section. The blue box should extend down to the yellow border on the bottom. There should also be a sepraration between all sections.
CSS:
body {
font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
font-size: 80%;
}
#container {
width: 694px;
margin: 0px auto;
}
#top {
vertical-align: middle;
text-align: center;
font: bold italic 18pt Verdana;
color: #FFFFFF;
width: 694px;
height: 64px;
background: #778CB3 url(blue_gradient_top.jpg);
background-repeat: repeat-x;
}
.cl {
clear:both;
}
#gallery {
width: 694px;
height: 145px;
padding-top: 5px;
padding-bottom: 2px;
margin: 0 0 0 0px;
}
#news {
width: 226px;
height: 874px;
background-color: #778CB3;
color: #FFFFFF;
background: #778CB3 url(news_gradient.jpg);
background-repeat: repeat-x;
margin: 0 0 0 0px;
}
#content {
width: 460px;
float: right;
height: 578px;
background-color: #A0AFCB;
background: #A0AFCB url(content_gradient.jpg);
background-repeat: repeat-x;
margin: 0 0 0 0px;
}
#menu {
width: 460px;
height: 20px;
background-color: #F7CB33;
padding: 0px;
border-bottom: 0px solid #FFFFFF;
float: right;
background: #F7CB33 url(menu_gradient.jpg);
background-repeat: repeat-x;
margin: 0 0 0 0px;
}
#menu a:link, #menu a:visited, #menu a:active {
background-color: #F7CB33;
padding: 13px;
text-decoration: none;
color: #000000;
}
#menu a:hover {
padding: 13px;
background-color: #F01E1E;
text-decoration: none;
color: #FFFFFF;
}
p {
margin: 0 0 0 0px;
}
h1 {
padding: 4px;
margin: 4px;
font-size: 120%;
font-weight: bold;
color: #FFFFFF;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #F7CB33;
}
h2 {
text-align: center;
font-size: 300%;
font-weight: normal;
color: #FFFFFF;
}
#pad {
color: #000000;
}
#footer {
background-color: #F7CB33;
width: 694px;
height: 39px;
color:#000000;
font-size: 90%;
text-align: center;
clear:both;
border-top: 5px solid #FFFFFF;
background: #F7CB33 url(footer_gradient.jpg);
background-repeat: repeat-x;
}
#footer a:link, #footer a:active, #footer a:hover, #footer a:visited {
color:#000000;
}
h4 {
font-size: 180%;
color: #F01E1E;
}
Can anyone help?
Thanks in advance.
Pam
[edited by: SuzyUK at 5:00 pm (utc) on April 9, 2007]
[edit reason] Please no URI's per TOS #13 [WebmasterWorld.com] [/edit]
Most differences in the box model occur in 'quirks' mode, i.e. you're not using a doctype. Try inserting this line at the very top (before <html>).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
If you're not using a doctype at all you'll probably find this messes things up a bit, but you should at least got the same results in all browsers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="description" content="...">
<META name="keywords" content="...">
<link href="business.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="top">
<p><br>Hop on the example Freeway!<br></p>
</div>
<div class="cl"></div>
<div id="gallery">
<img src="hundred_dollar_226op.jpg"width="226" height="150">
<img border="0" src="highway_sign_226op.jpg" width="226" height="150">
<img border="0" src="freedom_226op.jpg" width="226" height="150">
</div>
<div id="content">
<div id="menu">
</div>
<div id="pad">
<p>
<img src="search_map_226op.jpg" width="226" height="150" style="padding: 0px; padding-right: 16px;float:right; "></p>
<p> </p>
<h3>What are you searching for?</h3>
<ul>
<li><font size="2">Freedom that comes from making your own schedule.<br> </font></li>
<li><font size="2">Real income from your own home-based business.<br> </font></li>
<li><font size="2">A simple business that does not require a large investment or commitment to get started.<br> </font></li>
<li><font size="2">Real residual income that allows you to earn money every month even when you aren't working your business (this is our favorite part!).<br> </font></li>
<li><font size="2">More money to do the things you want and go the places you want to go: college education, new home, retirement, travel, support worthy organizations and causes, debt elimination, private school, fun money or even investment.<br> </font></li>
<li><font size="2">A successful business you can work from home or anywhere that will allow you to be your own boss and in control of your time and money again.</font></li>
</ul>
<p align="center"><br>
<b><font size="4">Enter your information below to be included in our</font></b></p>
<p align="center"><b><font size="4">FREE monthly drawing</font></b></p>
<div class="cl"></div>
<center><form method="post" action="#">
<input type="hidden" name="meta_web_form_id" value="1203046246">
<input type="hidden" name="meta_split_id" value="">
<input type="hidden" name="unit" value="fff-pros">
<input type="hidden" name="redirect" value="thank_you.html">
<input type="hidden" name="meta_adtracking" value="">
<input type="hidden" name="meta_message" value="1">
<input type="hidden" name="meta_required" value="name,from">
<input type="hidden" name="meta_forward_vars" value="0">
<table width="370">
<tr><td colspan=2><center></center></td></tr>
<tr><td><b><font size="2">Name:</font></b></td><td>
<input type="text" name="name" value="" size="35"></td></tr>
<tr><td><b><font size="2">Email:</font></b></td><td>
<input type="text" name="from" value="" size="35"></td></tr>
<tr><td><b><font size="2">City:</font></b></td><td>
<input type="text" name="custom City" value="" size="35"></td></tr>
<tr><td><b><font size="2">State:</font></b></td><td>
<input type="text" name="custom State" value="" size="35"></td></tr>
<tr><td><b><font size="2">Country:</font></b></td><td>
<input type="text" name="custom Country" value="" size="35"></td></tr>
<tr><td><b><font size="2">Phone:</font></b></td><td>
<input type="text" name="custom Phone" value="" size="35"></td></tr>
<tr><td><b><font size="2">Best time to call:</font></b></td><td>
<input type="text" name="custom Best time to call" value="" size="35"></td></tr>
<tr><td align="center" colspan="2"><input type="submit" name="submit" value="Submit"></td></tr>
</table>
<p><font size="1">By submitting this form, you agree to receive email <br>
and/or a phone call about a home business opportunity.</font></p>
</form></center>
</div>
</div>
<div id="news" style="width: 226px; height: 845px">
<h1>FREE!</h1>
<p style="margin-left: 4px; margin-right: 4px"><font size="2">Marketing tools
immediately available to you including a fully enabled e-commerce web site with free credit card
processing, unique domain name, dynamic marketing fliers, letterhead,
business cards and business overview calls you can share with anyone at
any time!</font></p>
<h1>FREE!</h1>
<h1><span style="font-weight: 400"><font size="2">Weekly training to ensure your success in your
home-based business!</font></span></h1>
<h1>FREE!</h1>
<p style="margin-left: 4px; margin-right: 4px"><font size="2">Weekly Business Overview calls!
</font> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p style="margin-left: 4px; margin-right: 4px"> </p>
<p> </p>
<p align="center"><img border="0" src="usa.gif" width="63" height="39"></p>
<p align="center"><font size="1">Currently this opportunity is only <br>
available in the United States.</font></p>
</div>
<div id="footer"><br>
Copyright 2007 # Enterprises. All rights reserved.</div>
</div>
<p> </p>
</body>
</html>
[edited by: SuzyUK at 10:37 am (utc) on April 11, 2007]
[edit reason] tidying specifics [/edit]
#one { background: lightblue; }
#two { float: left; }<div id='one'>
<div id='two'>Left<br>And<br>Longer<br>Than<br>Normal</div>
Not left
</div>
The background would only come down as far as 'Not Left'. But if you change to:
#one { background: lightblue; overflow: auto; }
Then apparently #one will then contain #two and extend to it's height.
Another method is to add a cleared break at the end:
#one { background: lightblue; }
#two { float: left; }BR { clear: both; height: 0; }
<div id='one'>
<div id='two'>Left<br>And<br>Longer<br>Than<br>Normal</div>
Not left<br>
</div>
Both these methods are supposed to work in place of faux columns but I haven't personally tested them.
