I have a basic CSS problem and I cant quite figure out why.

 

Perhaps someone here can help.

 

Here's the basic HTML & CSS code.

 

<div id="container">
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>
<section>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
</section>

 

And the corresponding CSS code...

 

div#container {
position: relative;
width: 1000px;
margin: 0;
padding: 0;
background: #111;
}

nav {
position: relative;
display: inline;
width: 400px;
margin: 0;
padding: 0;
background: #222;
}

section {
position: relative;
display: inline;
width: 600px;
margin: 0;
padding: 0;
background: #333;
}

ul {
padding: 0;
margin: 0;
list-style: none;
}

 

The problem is that the div#container background color is not being applied.

 

Any help would be appreciated. Thank you!

You haven't closed the container in the code above, so I'd check it in your actual code.

You haven't closed the container in the code above, so I'd check it in your actual code.

 

Oh sorry, It wasn't a direct copy of my code. The div tag is closed in my code.

Same code works perfectly in this JSFiddle, so I'm tempted to say your problem lies elsewhere. Could you post your whole document and stylesheet?

Actually, I just fixed it with inserting an empty div with a "clear: both;" style right before closing the container div, and that worked.

Edited March 2, 201214 yr by Siege84

I'm not seeing div#container at all in that copy of your document.

Those colours are are all blacks. Maybe change colours so you can see the different elements and the text. I don't know why your div#container doesn't show up. Probably a typo.

I'm not seeing div#container at all in that copy of your document.

 

Yeah, I changed the <section> to <article> and the <div id="container"> to <section> between my first and second post, and adjusted the CSS accordingly. It was just a cosmetic change to the code, none of the functionality was changed.

 

Those colours are are all blacks. Maybe change colours so you can see the different elements and the text. I don't know why your div#container doesn't show up. Probably a typo.

 

They were all grays. I often use monochrome's when testing just because it's sort of the standard I've become accustomed to. The problem I was having, before appending a <div style="clear: both;"></div> to solve it, was the <div id="container"> (now <section>) was still a #FFFFFF background instead of the one I was setting. It's fine now though.