www.webdeveloper.com
Results 1 to 5 of 5

Thread: floats and clears

  1. #1
    Join Date
    Mar 2005
    Posts
    48

    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>
    URL

  2. #2
    Join Date
    May 2005
    Posts
    2,040
    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.

  3. #3
    Join Date
    Mar 2005
    Posts
    48
    Oh im sorry I didnt mean to center, I meant to align it.

  4. #4
    Join Date
    Mar 2005
    Posts
    48
    Um, I tried doing negative margins to align them correctly, but its not working..

  5. #5
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    Rewrite
    Code:
    <!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>
    <!-- center page -->
    <div style="text-align:center"><div style="width:740px;margin:0px auto;">
    <!-- center page -->
    
    <img src="http://webdesigner.myfxh.com/church.jpg" style="display:block; width:700px; height:271px; margin:0px auto;" alt="">
    
    <div class="hr"></div>
    
    
    <!-- LEFT SIDE -->
    <div id="leftside_container">
    <!-- LEFT SIDE -->
    <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>
    <!-- LEFT SIDE -->
    </div>
    <!-- LEFT SIDE -->
    
    <!-- RIGHT SIDE -->
    <div id="rightside_container">
    <!-- RIGHT SIDE -->
    <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;">
    <!-- Start Poll -->
    
    <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">&nbsp;&nbsp;<input type="submit" name="view" value="View"></div>
    </td></tr>
    </table>
    </td></tr>
    </table>
    
    </form>
    <!-- End Poll -->
    </div>
    
    <div class="rightblock" style="height:175px;text-align:center">
    <a href="register.php">Register</a>
    </div>
    
    <!-- RIGHT SIDE -->
    </div>
    <!-- RIGHT SIDE -->
    
    <!-- CLEAR -->
    <div style="clear:both;height:1px;width:1px;"></div>
    <!-- CLEAR -->
    
    <!-- COPYRIGHT -->
    <div id="copyright">
    &copy; Cody Mullins 2006
    </div>
    <!-- COPYRIGHT -->
    
    <!-- center page -->
    </div></div>
    <!-- center page -->
    </body>
    </html>
    Please mark the thread resolved if this solves the issue at hand.

    Thread Tools -> Mark Thread Resolved

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles