CODEWITHSUNDEEP
csshtmlheight
wisp_
wisp_

Reputation: 3

<div> not showing height

I'm designing a website for my High School web design class and I'm having trouble with a div that doesn't seem to have any height I have the height set to 500px, but when I inspect the element in chrome it says it has a height of 0px. What am I doing wrong here?

CSS

@font-face {
font-family: liberator;
src: url('Liberator.otf');
font-family: MavenPro
src: url('MavenPro.otf');
}

body {
background-image: url('images/light_toast.png');
}

#all {
width: 900px;
margin: 0 auto;
overflow: hidden;
}

#banner {
height: 300px;
width: inherit;
background-image: url('images/gaben-cover.png');
}

#navigation {
background-color: #383838;
width: 900px;
}

#navigation ul {
list-style-type: none;
display: table;
width: 100%;
padding: 0px;
margin: 0px;
font-family: Liberator;
font-size: 30px;
}

#navigation li {
display: table-cell;
}

#navigation a {
text-decoration: none;
display: block;
color: #A3A3A3;
padding-bottom: 7px;
}

#navigation a:hover {
color: #383838;
background-color: #A3A3A3;

#content {
width: auto;
height: 500px;
background-color: #262626;
}

HTML

<div id = "all">

    <div id = "banner">
    </div>

    <div id = "navigation">
        <ul>
            <li><a href = "#">HOME</a></li>
            <li><a href = "#">HISTORY</a></li>
            <li><a href = "#">FUN FACTS</a></li>
            <li><a href = "#">DIY</a></li>
        </ul>
    </div>

    <div id = "content">
    </div>

    <div id = "footer">
    </div>

</div>

I know there must be something I'm doing wrong, but I'm new to HTML/CSS so I have no idea what it could be. Help!

Upvotes: 0

Views: 98

Answers (5)

Roukas
Roukas

Reputation: 36

your question drove me crazy because it is very simple you can't catch the error!!!

you simply forgot to close the curly bracket for your #navigation a:hover so it doesn't read the #content

#navigation a:hover {
color: #383838;
background-color: #A3A3A3;
**}**    /*this } was missing*/

#content {
width: auto;
height: 500px;
background-color: #262626;
}

Upvotes: 0

Ihsahs
Ihsahs

Reputation: 902

add overflow: auto; to the #content

#content {
width: auto;
height: 500px;
background-color: #262626;
overflow: auto;
}

and close the css

#navigation a:hover {
color: #383838;
background-color: #A3A3A3;
}

Upvotes: 0

Ace
Ace

Reputation: 969

You are missing a closing }

#navigation a:hover {
  color: #383838;
  background-color: #A3A3A3;

#content {

;)

Upvotes: 1

Mohsen Safari
Mohsen Safari

Reputation: 6795

you just need add } before #content :)

the problem is with your syntax. look at #navigation a:hover, you need to close this selector.

Upvotes: 0

Nik Terentyev
Nik Terentyev

Reputation: 2310

Just add <!DOCTYPE html> before the html tag.

Upvotes: 0

Related Questions