CODEWITHSUNDEEP
csshtml
Kyle
Kyle

Reputation: 1173

Container element within <header> not displaying

I'm using the 'section' element as a container within the 'header' element.

The container is not displaying in any way.

Live: http://blnr.org/testing

HTML

    <!-- start pagewrap -->
    <div id="pagewrap">

        <!-- start header -->
        <header>

            <section id="container">    

            </section>

        </header>
        <!-- end header -->

    </div>
    <!-- end pagewrap -->

CSS

header {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 65px;
    background-color: #F9F9F9;
    border-bottom: thin solid #C6D9F1;
    margin: 10px 0 10px 0;
}

header section #container {
    width: 900px;
    height: 30px;
    border: thin dotted black;
    margin: 0 auto;
}

Upvotes: 1

Views: 555

Answers (2)

Hamish
Hamish

Reputation: 23344

The space between section and #container means it's a selector for an element with the id 'container' inside the section block. Remove the space:

header section#container {
    width: 900px;
    height: 30px;
    border: thin dotted black;
    margin: 0 auto;
}

Upvotes: 0

Yotam Omer
Yotam Omer

Reputation: 15376

You have a tiny mistake:

change: header section #container to header section#container in your CSS as in:

header section#container {
    width: 900px;
    height: 30px;
    border: thin dotted black;
    margin: 0 auto;
}

What you did is basically looking for an element width id="container" inside the section.

Upvotes: 1

Related Questions