Menu
I have a simple website but I am having problem with the main content area not expanding to fit the text I have placed there. Can someone tell me what I am missing?
I know that the default for height is auto, but this did not work so I have added height: auto; to everything and it still doesn’t work.
You can see the website here: [URL=”http://www.lawrence-nv.us/Mayra”]http://www.lawrence-nv.us/Mayra
Here is the code:
CSS
[CODE]body {
font-family: Arial, Helvetica, sans-serif;
background-color: black;
}
#main .container{
background-color: #fff;
height: auto;
}
.container {
position: relative;
width: 960px;
margin: 0 auto;
height: auto;
}
.container #header{
position: relative;
height: 100px;
background-image:url(‘../images/banner.jpg’);
}
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
.container #menu{
position: relative;
height: 20px;
background-color: blue;
}
ul#menu {
list-style: none;
padding-top: 5px;
padding-bottom: 10px;
}
ul#menu li a {
font-size: 20px;
color: #fff;
text-decoration: none;
}
ul#menu li {
float: left;
padding-left: 30px;
padding-right: 75px;
}
.container #content{
position: relative;
top: 20px;
padding-left: 20px;
padding-right: 20px;
clear:both;
height: auto;
}
p{
color: black;
padding-bottom: 10px;
}
#footer{
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
background-color: #000;
}
#footer .container{
background-color: white;
padding-bottom: 5px;
padding-top: 5px;
}
#footer .container p{
text-align: center;
color: blue;
}
HTML
[CODE]<!doctype html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta name=”author” content=”Lawrence Keeney”>
<META NAME=”keywords” CONTENT=”Fashion Design, Makeup Artist, fashion, makeup, Las Vegas”>
<META NAME=”description” CONTENT=”Mayra Diaz Fashion Designer”>
<link rel=”stylesheet” type=”text/css” media=”screen, print, projection” href=”includes/style.css”>
<title>Mayra Designs</title>
</head>
<body>
<div id=”main”>
<div class=”container”>
<div id=”header”>
</div><!–end header –>
<div id=”menu”>
<ul id=”menu”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Designs</a></li>
<li><a href=”#”>Contact</a></li>
<div style=”clear:both”></div>
</ul>
</div><!–end menu –>
<div id=”content”>
<p>Consectetuer sociis leo egestas turpis mattis netus urna interdum eros. Tellus. Ac curabitur porttitor morbi
sollicitudin ipsum pretium interdum sagittis, quam lacinia. Fames lorem dictum aliquet aliquam est sit amet
platea consectetuer augue class velit dictum phasellus lorem hac egestas fringilla mus interdum nonummy est
sociis morbi.</p>
<p>Hendrerit Facilisi auctor mollis. Consectetuer. Torquent in, dapibus nisl vitae eu, urna dolor a magnis feugiat,
orci sed semper quam lacinia nonummy. Nonummy taciti vivamus maecenas enim mauris Sodales duis.</p>
<p>Convallis orci lobortis fusce in scelerisque libero rutrum massa fermentum phasellus primis bibendum. In
Quisque consequat. Suscipit pretium mattis lorem sociosqu consequat phasellus.</p>
<p>Consectetuer sociis leo egestas turpis mattis netus urna interdum eros. Tellus. Ac curabitur porttitor morbi
sollicitudin ipsum pretium interdum sagittis, quam lacinia. Fames lorem dictum aliquet aliquam est sit amet
platea consectetuer augue class velit dictum phasellus lorem hac egestas fringilla mus interdum nonummy est
sociis morbi.</p>
<p>Hendrerit Facilisi auctor mollis. Consectetuer. Torquent in, dapibus nisl vitae eu, urna dolor a magnis feugiat,
orci sed semper quam lacinia nonummy. Nonummy taciti vivamus maecenas enim mauris Sodales duis.</p>
<p>Convallis orci lobortis fusce in scelerisque libero rutrum massa fermentum phasellus primis bibendum. In
Quisque consequat. Suscipit pretium mattis lorem sociosqu consequat phasellus.</p>
</div><!–end content–>
<div id=”sidebar”>
</div><!–end sidebar–>
</div><!–end main container–>
</div><!–end main–>
<div id=”footer”>
<div class=”container”>
<p>Copyright © 2012 Lawrence – Creative Designs</p>
</div><!–end footer container–>
</div><!–end footer–>
</body>
</html>