SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Dec 2004
    Location
    england
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help! height issue?

    im not sure if im being my usual blonde self or if its just far too late, can anyone tell me what im doing wrong here?

    http://defactodesigns.co.uk/whitenpink/

    in ie it works fine (for a change!) but in firefox it doesnt like the way ive handled the background tiling image on the left nav bar?

    thanks in advance

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hello,

    You're not clearing your floats!

    Code:
    #contentholding {
    	width: 811px;
    	background-color: #FFFFFF;
    	background-image: url(images/categorymiddleback.gif);
    	background-repeat: repeat-y;
            overflow: hidden;
    }
    This will force this element to contain it's floated children.

    Any element with a dimension will automatically clear floats in IE, but that's incorrect - you need to clear things yourself.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2004
    Location
    england
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow thanks mark!

    i thought i was clearing my floats with my clearer divs

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    i thought i was clearing my floats with my clearer divs
    You can use that method if you would prefer, but they need to come after the floats and not within them
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #wrapper {
    	background: #CF3;
    	width: 500px;
    	margin: 0 auto;
    }
    #left {
    	float: left;
    	width: 200px;
    	background: #CF9;
    }
    #right {
    	float: right;
    	width: 300px;
    	background: #FC3;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
      <div id="left">
        <p>Some Content</p>
        <p>&nbsp;</p>
      </div>
      <div id="right"></div>
      <div style="clear: both"></div>
    </div>
    </body>
    </html>
    This way the clearing div is left in the flow of the wrapper, But is also forced to appear below the floats making your wrapper the desired height.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2004
    Location
    england
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow thanks mark!


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
  •