SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Non-Member
    Join Date
    Oct 2008
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIV over floating

    Hey,

    I have two DIVs, one floats left, the other one right. But its not staying within the designated area, its over floating out of it.

    Here is the pic: http://i261.photobucket.com/albums/i...dez305/div.jpg

    HTML:
    Code:
            <div id="subTop"></div>
            <div id="subInfo">
              <div id="tableTitle">
              Start clicking
              </div>
              <div id="table">
                <div id="left">Option one</div>
                <div id="right">Option two</div>
              </div>
            </div>
            <div id="subBottom"></div>
    CSS
    Code:
    #left
    {
      float: left;
    }
    
    #right
    {
      float: right;
    }
    
    #subTop
    { 
      width: 308px;
      height: 3px;
      margin: 0px;
      padding: 0px;
      background: url(../images/subSectionBrownTop.jpg) no-repeat;
    }
    
    #subInfo
    {
      margin: 0px;
      padding: 0px 5px 0px 5px;
      background: #d9d0b8;
    }
    
    #tableTitle
    {
      width: 288px;
      margin: 0px;
      padding: 5px 5px 5px 5px;
      height: 12px;
      color: #FFFFFF;
      font-weight: bold;
      background: #447579;
    }
    
    #table
    {
      width: 286px;
      margin: 0px;
      padding: 2px 5px 2px 5px;
      border-left: 1px solid #9e956a;
      border-right: 1px solid #9e956a;
      border-bottom: 1px solid #9e956a;
      background: #f8f5ec;
    }
    
    #subBottom
    {
      width: 308px;
      height: 3px;
      margin: 0px;
      padding: 0px;
      background: url(../images/subSectionBrownBottom.jpg) no-repeat;
    }
    It's suppose to be under the green part, but within the 1px border. If you notice, its way out.

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Add overflow:hidden to the #table div to force modern browsers to contain the floats. It works in IE because the width has given it "haslayout".
    Code:
    #table
    {
      width: 286px;
      margin: 0px;
      padding: 2px 5px 2px 5px;
      border-left: 1px solid #9e956a;
      border-right: 1px solid #9e956a;
      border-bottom: 1px solid #9e956a;
      background: #f8f5ec;
      overflow:hidden;
    }

  3. #3
    Non-Member
    Join Date
    Oct 2008
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you! that worked


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
  •