Why are my div boxes ignoring my css code?

Question

Firstly, I would like to say that I have tested if my link to my .css works, the background is made into a black color.

This is a ASP.NET Mvc test application which I am making, and I am having difficulty positioning some of my elements which are nested in div boxes. I have come to the conclusion that my div boxes nested within the topmostheader box is ignoring my .css code.

Here is my entire css file, called custom1.css

#topmostheader
{               
    background: none repeat scroll 0% 0% rgb(0, 0, 0);
    height: 90px;
    text-align: center;
}

#topmostheader.inner
{
    width: 1280px;
    margin: 0 auto;
    text-align: left;
    background-color: Red;
}

#topmostheader.app-name
{
    font-size: 14px;
    float: left;
    line-height: 90px;
    color: rgb(119,119,119);
    margin: 0px 20px 0px 0px;
}
#topmostheader.xxx-logo
{
    margin: 0px;
    height: 90px;
    float: right;
}

and here is my div box layout.

<div id="topmostheader">
    <div class="inner" >
        <div class="app-name">
            Lunch Application
        </div>
        <div class="xxx-logo">
            <img src="/content/xxx/logo.png" alt="xxx logo"/>
        </div>
    </div>
</div>

The desired result is not produced: the app-name, inner and acceleration logo divboxes are all dead-center in the screen, where the app-name must be in the left side, and the logo in the right.

I have tested the following code (Which produced the desired result, in an undesired manner - I may reuse this code multiple times which are in the .css file)

<div id="topmostheader">
    <div class="inner" >
        <div class="app-name" style="float:left">
            Lunch Application
        </div>
        <div class="xxx-logo" style="float:right">
            <img src="/content/xxx/logo.png" alt="xxx logo"/>
        </div>
    </div>
</div>

What am I doing wrong? Why are my div boxes not "floating" when I use the .css file?

Answer 1

To target the correct divs you need a space between the id and class name in your CSS rules: (e.g. change #topmostheader.app-name to #topmostheader .app-name)