使用float：left和float：right在父div内对齐2个子div时出现问题

Question

I know the answer is simple, but I can't seem to figure it out.

<div id="header">
<div id="30">
    <img src="../images/logo.png" width="97" height="97" />
</div>
<div id="company">
    <img src="../images/company.png" width="370" height="97" />
</div>
<div style="clear: both;"></div>
</div>

#header {
width:960px;
background-color:#e9e9e9;
margin-left:auto;
margin-right:auto;
padding-bottom:15px;
overflow:hidden;
}
#30 {
float:left;
}
#company {
float:right;
}

I couldn't figure out how to post the code from jsfiddle. The result is the "30" div aligned to the left side of the parent and the "company" div aligned to the right, but it's dropped down a line.

Answer 1

Your first problem is that #30 isn't a valid ID — CSS doesn't like it when the first character is a number. Try #thirty .

Here's a JSBin showing it working, albeit with JSBin logos. http://jsbin.com/IJaseKa/1

Answer 2

CSS has trouble with IDs beginning with a number. Use something with letters instead.

Here is the working code

http://jsfiddle.net/3bSVw/

<div id="header">
    <div id="other">
        <img src="../images/logo.png" width="97" height="97" />
    </div>
    <div id="company">
        <img src="../images/company.png" width="370" height="97" />
    </div>
    <div style="clear: both;"></div>
</div>




#header {
    width:960px;
    background-color:#e9e9e9;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:15px;
    overflow:hidden;
}
#other {
    float:left;    
}
#company {
    float:right;
}