floats and clears [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : floats and clears

codym43

03-05-2006, 12:39 PM

Hey, I used floats and clears to center this page...As usuall....looks good in IE, but now not FF..

How can I fix this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<title>Riverfront Christian School</title>

<style type="text/css">
a:link, a:visited, a:active{text-decoration:none;color:#570781;background-color:inherit;border:0;}
a:hover{color:rgb(275,28,28);background-color:inherit;text-decoration:none;border:0;}
a img{border:0;}
body{background-color:#570781;}

#container {
margin:0 auto;
width:740px;
}

#header {
text-align:center;
font-family:Verdana, Tahoma, Arial, sans-serif;font-size:12px;
background-color:#570781; color:#000;background-image:url(church.jpg);
margin: 0px 12px 0px 20px;
width:700px;height:271px;
}

body{text-align:center;}

.date {text-align:left;color:#570781;background-color:inherit;font-family:Arial;font-size:9px;}
.nav {display:block;background-color:inherit;color:inherit;background-image:url(http://img417.imageshack.us/img417/7444/titlemeduim5kb.jpg);width:745px;height:25px;}
.links {list-style: none;text-align:left;font-family:Verdana, Tahoma, Arial, sans-serif;font-size:12px;}
#leftc {
text-align:center;
font-family:Verdana, Tahoma, Arial, sans-serif;font-size:12px;
background-color:rgb(236,236,236);color:#000;border:solid 1px #FFF;
width:545px;height:800px;padding:10px;
margin-top:1px;
float:left;
}

#rightnav {
text-align:left;
font-family:Verdana, Tahoma, Arial, sans-serif;font-size:12px;
background-color:rgb(236,236,236);color:#570781;border:solid 1px #FFF;
width:155px;height:160px;padding:10px;
margin-top:1px;
margin-left:1px;
float:right;
clear:right;
}

#rightpoll {
text-align:center;
font-family:Verdana, Tahoma, Arial, sans-serif;font-size:12px;
background-color:rgb(236,236,236);color:#570781;border:solid 1px #FFF;
width:155px;height:175px;padding:10px;
margin-top:1px;
margin-left:1px;
float:right;
clear:right;
}

#rightadvertise {
text-align:center;
font-family:Verdana, Tahoma, Arial, sans-serif;font-size:12px;
background-color:rgb(236,236,236);color:#570781;border:solid 1px #FFF;
width:155px;height:479px;padding:10px;
margin-top:1px;
margin-left:1px;
float:right;
clear:right;

}

#copyright {
text-align:center;
font-family:Verdana, Tahoma, Arial, sans-serif;font-size:12px;
background-color:rgb(236,236,236);color:#570781;border:solid 1px #FFF;
width:725px;height:5px;padding:8px;
margin-top:1px;
clear:both;
}

</style>

</head>

<body>


<div id="container">

<div id="header">
</div>

<div class="nav"></div>

<div id="leftc">
<p><div class="date">3.01.06</div>&nbsp &nbsp &nbsp &nbsp &nbsp Hey everybody, I am currently working on the site's basic pages. I am trying to get all the information down, while also working on adding the membership feature. <BR><BR>
<p> Well, the membership feature allows you to 'register' and 'login'. (duh) Using this, teachers can login and post announcements, homework, or whatever they want. This could be useful.<BR><BR>
<p> On another note, I hope to add pictures on this site. For sports, mission trip pictures, and on a few other pages. I will need permission from the parent/guardian of the minor to allow this, and, I will ask your permission too. (maybe haha!)<BR><BR>
<o> Anyways, below is a form you can fill out for me to get your feedback. I would appreciate it.
</p>
<BR><BR>
Cody (yup!)

</div>

<div id="rightnav">
<ul class="links">
<li> Home </li><BR>
<li><a href="closings.html"> Delays/Closings </a></li><BR>
<li><a href="missions.html"> Our missions </a></li><BR>
<li><a href="sports.html"> Sports </a></li><BR>
<li><a href="history.html"> History </a></li><BR>
</ul>
</div>

<div id="rightpoll">

<form method=post action=http://7bc.2.pollhost.com/>
<table border=0 bgcolor=rgb(236,236,236) cellpadding=1 cellspacing=0><tr><td>
<table border=0 width=150 bgcolor=rgb(236,236,236) cellspacing=0 cellpadding=2><tr>
<td colspan=2><font face="Arial" size=-1 color=#570781>
<b>Do you think the school website will be useful?</b></font>
</td></tr><tr><td width=5><input type=radio name=answer value=1></td><td>
<font face="Arial" size=-1 color=#570781>Yes!!</font></td></tr><tr><td width=5>
<input type=radio name=answer value=2></td><td><font face="Arial" size=-1 color=#570781>No!!</font></td></tr>
<tr><td width=5><input type=radio name=answer value=3></td><td>
<font face="Arial" size=-1 color=#570781>You are wasting your time dude..</font></td></tr><tr>
<td colspan=2><center><input type=submit value=Vote>  <input type=submit name=view value=View></center></td></tr>
</table></td></tr></table></form>

</div>

<div id="rightadvertise">

<a href="register.php">Register</a>
<BR><BR>

</div>

<div id="copyright">
&copy Cody Mullins 2006
</div>

</div>

</body>

</html>

URL (http://webdesigner.myfxh.com/home.html)

drhowarddrfine

03-05-2006, 12:48 PM

I used floats and clears to center this page
How can I fix this?Don't use floats and clear to center a page.
looks good in IE, but now not FF..Don't use IE as your test case. As usual, IE has it wrong. You don't have enough width in your container. If you add up your column widths and padding/margin, it exceedds the container width causing it to drop down. FF, as usual, performs correctly.

codym43

03-05-2006, 12:51 PM

Oh im sorry I didnt mean to center, I meant to align it.

codym43

03-05-2006, 01:28 PM

Um, I tried doing negative margins to align them correctly, but its not working..

Ultimater

03-06-2006, 12:19 AM

Rewrite

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Riverfront Christian School</title>
<style type="text/css">
body{background-color:#570781; color:black; font-family:Verdana, Tahoma, Arial, sans-serif;}
a:link, a:visited, a:active{text-decoration:none;color:#570781;background-color:inherit;border:0;}
a:hover{color:rgb(255,28,28);background-color:inherit;text-decoration:none;border:0;}
a img{border:0;}
.hr {display:block;background-color:inherit;color:inherit;background-image:url(http://img417.imageshack.us/img417/7444/titlemeduim5kb.jpg);height:25px;width:100%;}
.date {text-align:left;color:#570781;background-color:inherit;font-family:Arial, sans-serif;}
.links {list-style: none;text-align:left;font-family:Verdana, Tahoma, Arial, sans-serif;}
.links li{margin-top:10px;}

#leftside_container{
float:left;width:545px;background-color:inherit;color:inherit
}
#rightside_container{
float:right;width:195px;background-color:inherit;color:inherit;
}

.leftblock{
text-align:left;
font-family:Verdana, Tahoma, Arial, sans-serif;font-size:12px;
background-color:rgb(236,236,236);color:black;border-style:solid;border-color:white;
padding-top:10px;margin-top:1px;border-top-width:1px;
padding-bottom:10px;border-bottom-width:1px;
padding-left:10px;border-left-width:1px;/* 11 */
padding-right:10px;border-right-width:1px;/* 11 */
width:523px; /* 11 + 523 + 11 = 545 */
}

.rightblock{
text-align:left;
font-family:Verdana, Tahoma, Arial, sans-serif;font-size:small;
background-color:rgb(236,236,236);color:black;border-style:solid;border-color:white;
padding-top:10px;border-top-width:1px;margin-top:1px;
padding-bottom:10px;border-bottom-width:1px;
padding-left:10px;border-left-width:1px;margin-left:1px;/* 12 */
padding-right:10px;border-right-width:1px; /* 11 */
width:172px; /* 12 + 172 + 11= 195*/
}

#copyright{
text-align:center;
font-family:Verdana, Tahoma, Arial, sans-serif; font-size:small;
background-color:rgb(236,236,236);color:#570781;border:solid 1px #FFF;
width:100%; height:5px;padding:8px;
margin-top:100px;
}

</style>
</head>
<body>

<div style="text-align:center"><div style="width:740px;margin:0px auto;">


<img src="http://webdesigner.myfxh.com/church.jpg" style="display:block; width:700px; height:271px; margin:0px auto;" alt="">

<div class="hr"></div>


<div id="leftside_container">

<div class="leftblock" style="height:800px;">
<p></p>
<div class="date">3.01.06</div>
<div style="text-indent:5ex;">Hey everybody, I am currently working on the site's basic pages. I am trying to get all the information down, while also working on adding the membership feature.</div>
<br>
<div style="text-indent:5ex;">Well, the membership feature allows you to 'register' and 'login'. (duh) Using this, teachers can login and post announcements, homework, or whatever they want. This could be useful.</div>
<br>
<div style="text-indent:5ex;">On another note, I hope to add pictures on this site. For sports, mission trip pictures, and on a few other pages. I will need permission from the parent/guardian of the minor to allow this, and, I will ask your permission too. (maybe haha!)</div>

<br>
<div style="text-indent:5ex;">Anyways, below is a form you can fill out for me to get your feedback. I would appreciate it.</div>
<br>
<div>Cody (yup!)</div>
</div>

</div>



<div id="rightside_container">

<div class="rightblock" style="height:160px;">
<ul class="links">
<li> Home </li>

<li><a href="closings.html"> Delays/Closings </a></li>
<li><a href="missions.html"> Our missions </a></li>
<li><a href="sports.html"> Sports </a></li>
<li><a href="history.html"> History </a></li>
</ul>
</div>

<div class="rightblock" style="height:175px;">


<form method="post" action="http://7bc.2.pollhost.com/">

<table border="0" style="background-color:rgb(236,236,236); color:inherit;" cellpadding="1" cellspacing="0">
<tr><td>
<table border="0" style="background-color:rgb(236,236,236);color:inherit; width:150px;" cellspacing="0" cellpadding="2">
<tr><td colspan="2"><span style="color:#570781; background-color:inherit; font-family:Arial, sans-serif; font-size:small;font-weight:bold;">Do you think the school website will be useful?</span></td></tr>
<tr><td style="width:5px;"><input type="radio" name="answer" value="1"></td><td><span style="color:#570781; background-color:inherit; font-family:Arial, sans-serif; font-size:small;">Yes!!</span></td></tr><tr><td style="width:5px;"><input type="radio" name="answer" value="2"></td><td><span style="color:#570781; background-color:inherit; font-family:Arial,sans-serif; font-size:small;">No!!</span></td></tr>
<tr><td style="width:5px;"><input type="radio" name="answer" value="3"></td><td><span style="color:#570781; background-color:inherit; font-family:Arial, sans-serif; font-size:small;">You are wasting your time dude..</span></td></tr>
<tr><td colspan="2"><div style="text-align:center"><input type="submit" value="Vote">  <input type="submit" name="view" value="View"></div>
</td></tr>
</table>
</td></tr>
</table>

</form>

</div>

<div class="rightblock" style="height:175px;text-align:center">
<a href="register.php">Register</a>
</div>


</div>



<div style="clear:both;height:1px;width:1px;"></div>



<div id="copyright">
© Cody Mullins 2006
</div>



</div></div>

</body>
</html>

Please mark the thread resolved if this solves the issue at hand.

Thread Tools -> Mark Thread Resolved