Hi all,

I am fairly inexperienced with CSS and so I've run into a problem with a three-column DIV layout I'm using in IE. It works fine in Safari and FF, but not IE.

You can see it in action here:
http://www.fasports.com/az/phx/leagues.php

The boxes/buttons should be in rows of three, but IE knocks it apart.

The code for one of the rows is:

                

<div style="border: 2px dotted #003366; padding: 10px">

<div style="float: left">
                    
<div class="button">
                        
LEFT
                        
</div>   
                    
<div style="padding: 0px 330px 0px 330px">

<div class="button">
                        
MIDDLE
                        
</div>                    
                    
</div>

                 
                    
                    </div>                    
                    
                    
                    
                </div>

Any help is appreciated.. thanks!

Rearranging your code would be helpful, try using

button {
border: 2px dotted #003366;
float: left;
padding: 10px auto;
}

something like that

So I changed my code to:

<div style="float: left; padding: 10px auto">
                    
     <div class="button">                
      LEFT
     </div>                    
                    
</div>                    
                    
<div style="padding: 0px 330px 0px 330px">

      <div class="button">
      MIDDLE
      </div>                    
                    
</div>

But I get the same result...

The "button" divs aren't the problem, I don't think -- they're just the content within the columns I'm trying to set up... or could that be what's making IE error?

The class is setup as:

.button {
    border:0;
}

.button a {
    border:3px double #000;
    display:block;
    outline-color:#-moz-use-text-color;
    outline-style:none;
    outline-width:medium;
    width:200px;
    line-height:20px;
    text-align:center;
    font-family:Arial,Helvetica,sans-serif;
    font-size:14px;
    font-weight:400;
    text-decoration:none;
    color:#fff;
    background-color:#036;
    font-style:normal;
    margin:0;
    padding:7px;
}

.button a:hover {
    font-weight:700;
    background-color:gray;
}

.button a:active {
    outline-color:#-moz-use-text-color;
    outline-style:none;
    outline-width:medium;
}

Thanks for your help!

First of all, if you're going to float an element (other than an image), you must give it a width, otherwise you can get results you didn't bargain for. Just get in the habit of defining widths for floats.

Define the 3 columns with widths appropriate hold the content, float them all left or right, and add margins to space them as you want them.

One other thing, don't use spans on text for a page heading - use a proper Hx tag for a HEADING - search engine spiders like REAL headings

Got it figured out... thanks so much for everyone's help!