Everytime I think I understand this, I don't.

Discussion in 'HTML & Website Design' started by mnymkr, Oct 3, 2006.

  1. #1
    So I am centering a div.

    I have padding and margins set globally off.

    This division is my maincontainer and it is 800px wide, no borders.

    I have 3 divisions in the maincontainer: left main and right

    left and right are 150 px each
    and main is 500 px.

    left is floated left
    maincontainer is floated left
    and right is floated right

    It does work in FF but it does in IE.

    It is/was my understanding that division edges have no px size unless specified with a border. So how come they all can't fit in the main container

    thanks!
     
    mnymkr, Oct 3, 2006 IP
  2. M57

    M57 Peon

    Messages:
    41
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Will you show us the code please? we can't just guess the problem. :)

    I've made a small sample following what you said, and it's working fine for me in both FF and IE:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <title>Sample</title>
      <style>
        * { padding:0; margin:0 }
        
        #container { width: 800px; margin:0 auto;}
        #left { background-color: red; width: 150px; height: 100px; float: left }
        #main { background-color: green; width: 500px; height: 100px; float: left }
        #right { background-color: blue; width: 150px; height: 100px; float: right }
            
      </style>
      </head>
      <body>
        <form>
          <div id="container">
             <div id="left"></div>
             <div id="main"></div>
             <div id="right"></div>
          </div>
      </body>
    </html>
    Code (markup):
    Hope this helps :)
     
    M57, Oct 4, 2006 IP
    Colleen likes this.
  3. mnymkr

    mnymkr Well-Known Member

    Messages:
    2,328
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    120
    #3
    OK thanks,

    That is the exact code, now what I did was add a 1px border the the right side of the left div and a 1 px border to the left side of the right div.

    I thought I could decrease the middle by 2px and it should fit but it breaks in FF. Or at least it did last night.
     
    mnymkr, Oct 4, 2006 IP