INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

why does'nt the #content background collor fill the entire area.

why does'nt the #content background collor fill the entire area.

why does'nt the #content background collor fill the entire area.

(OP)
Hi, I do not understand why my #content background color does not fill the entire area. I remove the height thinking that it should fill it and it does not.
My question is what do I have to do to make my #content background to fill the entire area and not leave a gap. I am just trying to learn css.

thanks

CODE --> css

<DOCTYPE html5>
<html>
<head>
<title>get your phil</title>
<style>
body,h1,h2,h3,h4,h5,h6,span,ul,li {margin:0;padding:0;}
body {font-family:arial;line-height:180%;text-align:center;}
#container{width:700px;text-align:left;margin:0 auto;}
#header {height:150px;background-color:ED146F;text-transform:uppercase;text-align:right;}
#header h1 {font-size:70px;color:yellow;}
#header h2 {font-size:30px;color:white;}
#content {background-color:413D3D;color:white;padding:40px;text-align:justify;}
#content ul {list-style:none;}
#content li {width:300px;border:1px solid white;float:right;}
#content li h3 {text-transform:uppercase;}
#content li h4 {text-transform:capitalize;font-style:italic;}
#content li h5 {text-transform:uppercase;color:ED146F;}

#footer{clear:both;height:150px;background-color:ED146F;text-transform:uppercase;text-align:right;color:yellow;}
#footer span {color:white;}

</style>
</head>
<body>

<div id="container">
<div id="header">
<h1>get your phil</h1>
<h2>dinner <span>& </span> concert packages </h2>
</div>

<div id="content">
<p class="dropcap">join us!
We've partnered with Downtown's best restaurants for an exclusice offer! Get a delicious prix fixe dinner followed by a concert featuring the world-class
<span>los angeles philharmonic at walt disney concert hall</span> all for a special low price</p>

<ul>
<li>
<h3>chaya downtown</h4>
<h4>debussy & bartok</h5>
<h5>oct 18</h6>
</li>

<li>
<h3>border grill downtown la</h3>
<h4>salonen & sibelius</h4>
<h5>oct 25</h5>
</li>

<li>
<h3>le ka restaurant & lounge</h3>
<h4>tavey & shostakovich</h4>
<h5>nov 8</h5>
</li>

<li>
<h3>first & hope</h3>
<h4>downtown supper club Bruckners eighth</h4>
<h5>nov 15</h5>
</li>

<li>
<h3>blue cow kitchen</h3>
<h4>bach, schumann and more</h4>
<h5>oct 30</h5>
</li>

<li>
<h3>get your tickets now - packages sart at just $92!</h3>
<h5>LAPhil.com/BetYourPHil</h5>
</li>

</ul>
</div>
<div id="footer">
<h1>walt disney concert hall 10<span>th anniversary</span></h1>

</div>


</div>

</body>
</html> 

RE: why does'nt the #content background collor fill the entire area.

(OP)
I gave the content height height:500px. I expected it to expand without this. Was that not a correct assumption?

<DOCTYPE html5>
<html>
<head>
<title>get your phil</title>
<style>

body,h1,h2,h3,h4,h5,h6,span,ul,li {margin:0;padding:0;}
body {font-family:arial;line-height:180%;text-align:center;}
#container{width:700px;text-align:left;margin:0 auto;}
#header {height:100px;background-color:ED146F;text-transform:uppercase;text-align:right;padding:40px;}
#header h1 {font-size:70px;color:yellow;}
#header h2 {font-size:30px;color:white;margin-top:20px;}
#content {background-color:413D3D;color:white;padding:30px;text-align:justify;height:500px;}
#content ul {list-style:none;}
#content li {width:300px;text-align:left;float:left;margin-top:20px;}
#content li h3 {text-transform:uppercase;font-size:25px;}
#content li h4 {text-transform:capitalize;font-style:italic;font-size:20px}
#content li h5 {text-transform:uppercase;color:ED146F;font-size:20px;}

#footer{clear:both;height:150px;background-color:ED146F;padding:10px;}
#footer h1 {text-transform:uppercase;text-align:right;color:yellow;}
#footer span {color:white;}




</style>
</head>
<body>

<div id="container">
<div id="header">
<h1>get your phil</h1>
<h2>dinner <span>& </span> concert packages </h2>
</div>

<div id="content">
<p class="dropcap">join us!
We've partnered with Downtown's best restaurants for an exclusice offer! Get a delicious prix fixe dinner followed by a concert featuring the world-class
<span>los angeles philharmonic at walt disney concert hall</span> all for a special low price</p>

<ul>
<li>
<h3>chaya downtown</h4>
<h4>debussy & bartok</h5>
<h5>oct 18</h6>
</li>

<li>
<h3>border grill downtown la</h3>
<h4>salonen & sibelius</h4>
<h5>oct 25</h5>
</li>

<li>
<h3>le ka restaurant & lounge</h3>
<h4>tavey & shostakovich</h4>
<h5>nov 8</h5>
</li>

<li>
<h3>first & hope</h3>
<h4>downtown supper club Bruckners eighth</h4>
<h5>nov 15</h5>
</li>

<li>
<h3>blue cow kitchen</h3>
<h4>bach, schumann and more</h4>
<h5>oct 30</h5>
</li>

<li>
<h3>get your tickets now - packages sart at just $92!</h3>
<h5>LAPhil.com/BetYourPHil</h5>
</li>

</ul>
</div>
<div id="footer">
<h1>walt disney concert hall 10<span>th anniversary</span></h1>

</div>


</div>

</body>
</html>

RE: why does'nt the #content background collor fill the entire area.

Hi,
great that your learning css. Before we get to a solution for your problem, the DOCTYPE at the beginning of your html on the first line should be <!DOCTYPE html>. This is the correct DOCTYPE for html 5. The browser will render the document in "quirks" mode the way you have put it which could lead to all sorts of strange display problems.

Now on to your question - A solution to your question is to add overflow: auto; to your content div css like this :

#content {overflow:auto; background-color: #413D3D; color:white; padding:40px; text-align:justify;}

- also notice I've added a # in front of the color in the background-color part of your css. Always include this if your entering your colors in hexadecimal.

It is only personal preference, I know, but I tend to layout my css like this :-

CODE

#content {
overflow:auto;
background-color:#413D3D;
color:white;
padding:40px;
text-align:justify;
}

#content ul {
list-style:none;
}

#content li {
width:300px;
border:1px solid white;
float:right;
} 

I find it easier to read when trying to find errors or modify it at a later date.

Finally visit this link Link ( w3cschools.com ) for a great free tutorial site on all aspects of webpage building and css tutorials and much, much more.

Have a fun time learning css. It is a very powerful tool at your fingertips.

Steve

RE: why does'nt the #content background collor fill the entire area.

(OP)
Hey thank you. I appreciate your help, your comments and I am headed to w3cschools.com now so I can understand
what overflow:auto means.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close