SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Riddle me this

  1. #1
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Riddle me this

    How is it that this page http://webtestbed.co.uk/sitesinprog/test
    Renders fine in opera, and internet explorer but not in firefox? Latest version of all browsers by the way.
    I wouldn't mind if i understood why, but i am stumped, it is such a simple thing, and yet, well, i dunno? Anyone shed any light on this please?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    When you clear a float you are efffectively clearing any floats above the floated element in the html. Therefore you may find that where you have multiple floats down one side then the next float will start level with the last cleared float which is what mozilla is doing.

    Quite often opera will do this also in certain circumstances.

    In your example you don't really need to float multiple items left but rather float one column left and just stack your items inside statically. this confines the float and allowds the right float to pop up alongside. This also simplifies the css but does involve one extra nesting in the html.

    Heres the example.
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    /* CSS Document */
    body {
    text-align: center;
    background-color: #aaaaaa;
    }
    #container {
    margin: auto;
    width: 760px
    }
    #topbit {
    width: auto;
    margin: 0 auto;
    text-align: left;
    }
    #bottombit {
    width: auto;
    margin: 0 auto;
    text-align: left;
    }
    #leftbar {
    background-color: #ffffff;
    height: 200px;
    margin: 0 auto;
    }
    #menu1,#menu2,#menu3,#menu4,#menu5 {
    background-color: #CCFF00;
    height: 20px;
    }
    #menu2 {background-color: #3333CC;}
    #menu3 {background-color: #669933;}
    #menu4 {background-color: #9933CC;}
    #menu5 {background-color: #CC99CC;}
    #leftbar2 {
    background-color: #ffffff;
    height: 200px;
    }
    #middlebit {
    height: 500px;
    width: 597px;
    background-color: #660000;
    float: right;
    margin: 0 auto;
    clear: right;
    }
    #leftcolumn{
    float:left;
    background-color: #ffffff;
    width: 163px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="container"> 
    <div id="topbit"><img src="http://webtestbed.co.uk/sitesinprog/...mages/tbar.gif" width="760" height="114" alt="top graphic" /></div>
    <div id="leftcolumn"> 
    	<div id="leftbar"></div>
    	<div id="menu1"></div>
    	<div id="menu2"></div>
    	<div id="menu3"></div>
    	<div id="menu4"></div>
    	<div id="menu5"></div>
    	<div id="leftbar2"></div>
    </div>
    <div id="middlebit"></div>
    <div id="bottombit"><img src="http://webtestbed.co.uk/sitesinprog/...mages/bbar.gif" width="760" height="61" alt="bottom graphic" /></div>
    </div>
    </body>
    </html>
    Works in all three of the browsers you specified.

    Hope that helps.

    Paul

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh i see!, i must say i would not have thought of nesting the divs again. I like the technique. To be honest the css for that page was a result of me fiddling around with what i had originally that would not work, i started throwing all the floats in to see what would happen (shows the gap in my knowledge doing that really!).

    Thank you very much indeed for your help, most kind.


Bookmarks

Posting Permissions

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