Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

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

Status
Not open for further replies.
csphard

csphard

Programmer
Apr 5, 2002
194
0
0
US
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

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>
 
Sort by date Sort by votes
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>
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
58
lmcate
lmcate
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
269
Mike Lewis
Mike Lewis
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
39
CoolBreeze007
CoolBreeze007
stephane.bouchard2
  • Locked
  • Question
How can you find the html version from source code. 2
Replies
6
Views
105
stephane.bouchard2
stephane.bouchard2
lupidol
  • Locked
  • Question
Elements not populate the entire screen 1
Replies
1
Views
36
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top