www.webdeveloper.com
Results 1 to 7 of 7

Thread: Float Confusion

  1. #1
    Join Date
    Jul 2003
    Location
    New York City
    Posts
    2,771

    Float Confusion

    Ahkay, so I'm trying to float two divs so that they are right next to each other. This works great in IE, but in real browsers, I can't get them to align.

    CSS:
    Code:
    #left {
    width:150px;
    margin:0px;
    float:left;
    clear:right;
    }
    
    #right {
    float:right;
    clear:left;
    margin:0px 0px 0px 160px;
    }
    One will go left, and one goes right, however they don't align vertically. I want them right next to each other, but it just won't happen. Any ideas?

  2. #2
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    1,592
    Get rid of the clears...
    Windows XP SP2 - theme: Thallos
    AMD Athlon 64 X2 4600+ | ASUS M2N32-SLI Deluxe | 2 * 1024 PC2-6400 Mushkin DDR2-800 | eVGA GeForce 6800XT 256MB | Creative Sound Blaster X-FI Music
    5 * 320GB Seagate Barracuda SATA-II 3Gb/s in RAID 5 | Lite-On 16x DVD-RW | Mitsumi 7-in-1 Floppy drive and card reader
    Samsung SyncMaster 204B 20" TFT LCD | Logitech G15 Keyboard | Logitech G7 Mouse | Seasonic PC160SK Headset

  3. #3
    Join Date
    Jul 2003
    Location
    New York City
    Posts
    2,771
    Tried it, but it still doesn't work, and then it won't work with IE. So I put them back in. Any other ideas?

  4. #4
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    1,592
    Do you have a link to the page in question?
    Windows XP SP2 - theme: Thallos
    AMD Athlon 64 X2 4600+ | ASUS M2N32-SLI Deluxe | 2 * 1024 PC2-6400 Mushkin DDR2-800 | eVGA GeForce 6800XT 256MB | Creative Sound Blaster X-FI Music
    5 * 320GB Seagate Barracuda SATA-II 3Gb/s in RAID 5 | Lite-On 16x DVD-RW | Mitsumi 7-in-1 Floppy drive and card reader
    Samsung SyncMaster 204B 20" TFT LCD | Logitech G15 Keyboard | Logitech G7 Mouse | Seasonic PC160SK Headset

  5. #5
    Join Date
    Jul 2003
    Location
    New York City
    Posts
    2,771

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    I believe #right needs a width, too, and the sum of the box widths must be less than the parent container.

  7. #7
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Code:
    <style type="text/css"><!--
    
    #left{
      margin:10px;
      width:150px;
      border:1px solid;
      text-align:left;
      float:left;
    }
    
    #holder{
      margin:0 0 0 -172px;
      width:100%;
      float:right;
    }
    
    #right{
      margin:10px 10px 10px 172px;
      border:1px solid;
      text-align:right;
    }
    
    --></style>
    
    </head>
    
    <body>
    
    <div id="holder">
    <div id="right">Right</div>
    </div>
    
    <div id="left">Left</div>
    http://www.mezzoblue.com/archives/20.../friday_chall/
    http://ryanbrill.com/floats.htm
    http://www.alistapart.com/articles/negativemargins/
    Every fight is a food fight when you’re a cannibal.

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