SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict dreado's Avatar
    Join Date
    Jan 2005
    Location
    UK
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    More IE Float Problems..

    I can't seem to figure this one out, even though I have made the divs plenty small enough, and the margin and padding is set to zero, the third of three floated divs is dropping under in IE.

    EDIT: Sorry, figured it out. It seems I needed to specify the width of the parent .

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    ? the wrapper hase no width ? floats must be first in the html

    float right 100% width fits in any box
    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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Sam Smith" />
    <style type="text/css">
    /* CSS Document */
    
    *{margin:0;padding:0;
    }
    
    p {
    margin:0 0 1em 0;
    line-height: 120%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    body{background:#FFFFFF}
    
    #container {
    width:770px;
    position: absolute;
    left:50%;
    margin-left: -385px;
    border:1px solid #B1B1B1;
    overflow:hidden;
    padding:0 0 17px 0;
    }
    
    #banner {
    background:#ff6600 url(images/flower.jpg) no-repeat right center;
    height:121px;
    }
    
    #nav{
    background-color: #B1B1B1;
    height: 27px;
    line-height: 27px;
    font-family:"Times New Roman", Times, serif;
    color: #FFFFFF;
    font-size: 18px;
    width: 760px;
    padding-right: 5px;	
    padding-left: 5px;
    }
    #links {
    float:right;
    font-size: 14px;
    color: #D7D7D7;
    }
    
    #links a{
    font-size:15px;
    color:#FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    padding-right: 2px;
    padding-left: 2px;
    }
    #links a:link{text-decoration: none;}
    #links a:visited{color:#FFFFFF;}
    #links a:hover{color:#D64B8E;}
    #links a:active{color:#D64B8E;
    }
    
    #thumbs{}
    
    #main{
    float:left;
    width:100%;
    background: url(images/mainpic1.jpg) no-repeat right top;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:justify;
    margin:0 -200px 0 0;
    }
    #main *{margin-right:200px;}#main br{margin:0px;}
    #main *{padding:5px;}
    
    #qlinks {
    width:200px;
    float:left;
    }
    
    .quicklinks{
    background:#FF0000;
    }
    </style>
    </head>
    
    <body>
    
    <div id="container">
    
    <div id="banner">
    <h1><img src="images/logo.gif" alt="" width="194" height="121" /></h1>
    </div>
    
    <div id="qlinks">
    <div class="quicklinks">link1</div><div class="quicklinks">link2</div><div class="quicklinks">link3</div>
    </div>
    
    <div id="main">
    <h2>welcome</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum velit risus, scelerisque ac, rutrum a, ultrices sed, augue. Maecenas lobortis ipsum in nibh convallis bibendum. Aliquam rutrum interdum risus. Curabitur a est eget magna rutrum pellentesque. Proin auctor aliquam velit. Morbi molestie, magna eget lobortis vehicula, magna leo faucibus tellus, at convallis urna est a orci. Suspendisse orci nulla, commodo tincidunt, rhoncus ac, viverra et, erat. Sed vel neque et dui vestibulum rutrum. Etiam vulputate nisi quis ipsum. Cras libero nisi, blandit id, commodo eget, mollis ut, leo. Duis gravida, est sed sagittis pulvinar, elit purus bibendum mi, eget posuere pede sem quis ante.</p>
    </div>
    
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Addict dreado's Avatar
    Join Date
    Jan 2005
    Location
    UK
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hadn't specified a width for #qlinks, after I did, all was fine.
    I understand floats must come first, but there are no non floating elements in this particular situation.

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    ? your main was not floating, it must be right of qlinks ? or under qlinks ?


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
  •