Question

I have elements that are displayed inline and have some horizontal spacing between them. This is fine but I need the amount of spacing to be the same cross bower which it currently isnt. Can I achieve this without using floats?

I need to support IE7 so I cant use inline-block, although I could use an IE7 stylesheet if absoulty necessary.

http://jsfiddle.net/2uBuu/3/

<div>
    <label>label</label> 
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div>
    <label>label</label>  
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>



<div>
    <label>label</label>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
     <select>
 </div>
 <div>
    <label>label</label>
    <select>
       <option>1</option>
       <option>2</option>
       <option>3</option>
     <select>
  </div>

div {
    background-color: blue;
    display: inline;
}
label {
    display: none;
}    
​
​

Answer 1

You are still not closing the SELECTs (the second part now)…

Just add

select{
    padding: 0px;
    margin: 0px;
}

to override browsers specific behaviors related to SELECT boxes… chrome for example adds padding and margin to them if not specified.

This is a fiddle with all SELECts closed and the padding and margin specified, and it works for me: http://jsfiddle.net/2uBuu/6/