/    Sign up×
Community /Pin to ProfileBookmark

floats and clears

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?

[code]
<!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>
<!– Begin centered page –>

<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”>
<!– Start Poll –>
<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>&nbsp;&nbsp;<input type=submit name=view value=View></center></td></tr>
</table></td></tr></table></form>
<!– End Poll –>
</div>

<div id=”rightadvertise”>

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

</div>

<div id=”copyright”>
&copy Cody Mullins 2006
</div>
<!– End centered Page –>
</div>

</body>

</html>
[/code]

[URL=http://webdesigner.myfxh.com/home.html]URL[/URL]

to post a comment
CSS

4 Comments(s)

Copy linkTweet thisAlerts:
@drhowarddrfineMar 05.2006 — I used floats and clears to center this page

How can I fix this?[/QUOTE]
Don't use floats and clear to center a page.
looks good in IE, but now not FF..[/QUOTE]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.
Copy linkTweet thisAlerts:
@codym43authorMar 05.2006 — Oh im sorry I didnt mean to center, I meant to align it.
Copy linkTweet thisAlerts:
@codym43authorMar 05.2006 — Um, I tried doing negative margins to align them correctly, but its not working..
Copy linkTweet thisAlerts:
@UltimaterMar 06.2006 — Rewrite
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html dir="ltr" lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;
&lt;meta http-equiv="content-style-type" content="text/css"&gt;
&lt;meta http-equiv="content-script-type" content="text/javascript"&gt;
&lt;title&gt;Riverfront Christian School&lt;/title&gt;
&lt;style type="text/css"&gt;
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;
}

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- center page --&gt;
&lt;div style="text-align:center"&gt;&lt;div style="width:740px;margin:0px auto;"&gt;
&lt;!-- center page --&gt;

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

&lt;div class="hr"&gt;&lt;/div&gt;


&lt;!-- LEFT SIDE --&gt;
&lt;div id="leftside_container"&gt;
&lt;!-- LEFT SIDE --&gt;
&lt;div class="leftblock" style="height:800px;"&gt;
&lt;p&gt;&lt;/p&gt;
&lt;div class="date"&gt;3.01.06&lt;/div&gt;
&lt;div style="text-indent:5ex;"&gt;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.&lt;/div&gt;
&lt;br&gt;
&lt;div style="text-indent:5ex;"&gt;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.&lt;/div&gt;
&lt;br&gt;
&lt;div style="text-indent:5ex;"&gt;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!)&lt;/div&gt;

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

&lt;!-- RIGHT SIDE --&gt;
&lt;div id="rightside_container"&gt;
&lt;!-- RIGHT SIDE --&gt;
&lt;div class="rightblock" style="height:160px;"&gt;
&lt;ul class="links"&gt;
&lt;li&gt; Home &lt;/li&gt;

&lt;li&gt;&lt;a href="closings.html"&gt; Delays/Closings &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="missions.html"&gt; Our missions &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="sports.html"&gt; Sports &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="history.html"&gt; History &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;div class="rightblock" style="height:175px;"&gt;
&lt;!-- Start Poll --&gt;

&lt;form method="post" action="http://7bc.2.pollhost.com/"&gt;

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

&lt;/form&gt;
&lt;!-- End Poll --&gt;
&lt;/div&gt;

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

&lt;!-- RIGHT SIDE --&gt;
&lt;/div&gt;
&lt;!-- RIGHT SIDE --&gt;

&lt;!-- CLEAR --&gt;
&lt;div style="clear:both;height:1px;width:1px;"&gt;&lt;/div&gt;
&lt;!-- CLEAR --&gt;

&lt;!-- COPYRIGHT --&gt;
&lt;div id="copyright"&gt;
&amp;copy; Cody Mullins 2006
&lt;/div&gt;
&lt;!-- COPYRIGHT --&gt;

&lt;!-- center page --&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;!-- center page --&gt;
&lt;/body&gt;
&lt;/html&gt;

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

[b]Thread Tools -> Mark Thread Resolved[/b]
×

Success!

Help @codym43 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...