Member_2_5230414
asked on
height:auto not working
For some reason height:auto on my .largeMain code does not do height auto :S.
This can be seen here: http://109.73.163.234/~bakeusac/index.php
my codes are:
This can be seen here: http://109.73.163.234/~bakeusac/index.php
my codes are:
body {
margin: 0;
padding: 0;
font: 100%/1.5 "Gill Sans", GillSans, "Gill Sans MT", Arial, Helvetica, sans-serif;
background-image:url('background.gif');
background-position:top;
background-repeat:no-repeat;
background-color: #c5b292;
text-align:center;
}
#topbanner
{
margin:auto;
margin-top: 5px;
width: 954px;
text-align: left;
padding: 15px;
background-color: #d2b48c;
height: 150px; /* Do rounding (native in Firefox and Safari) */;
border:solid;
border-width:2px;
border-color:black;
}
#whitebanner
{
width: 945px;
background-color: #F9F9F9;
border:solid;
border-width:2px;
border-color:#5c3300;
height:145px;
vertical-align:middle;
}
.largeMain {
margin: auto;
width: 974px;
height: auto;
text-align: left;
padding: 10px;
background-color: #d2b48c;
margin-top:15px;
border:solid;
border-width:2px;
border-color:black;
}
#menu
{
width: 150px;
background-color:#F9F9F9;
text-align:center;
border:solid;
border-color:#5c3300;
border-width:2px;
float:left;
height:500px;
}#mainarea {
background-color: #F9F9F9;
width: 800px;
float: left;
margin-left:15px;
border:solid;
border-color:#5c3300;
border-width:2px;
height:auto;
}
#mainarea2 {
background-color: #F9F9F9;
width: 800px;
float: left;
margin-left:15px;
border:solid;
border-color:#5c3300;
border-width:2px;
height:1250px;
}
.largeMain #menu h1 {
margin-top: 10px;
}
#text {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: large;
text-align: center;
padding: 15px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bake Us A Cake</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="topbanner">
<div id="whitebanner">
<center>
<img src="logo.gif" width="945" height="145" />
</center>
</div>
</div>
<div class="largeMain">
<div id="menu">
<h1><u>Menu</u></h1>
<p><a href="index.php">Home</a></p>
<p><a href="price.php">Price List</a></p>
<p><a href="comments.php">Testimonials</a></p>
<p><a href="contact.php">Contact Us</a></p>
</div>
<div id="mainarea">
<div id="text">
<h2><strong><u><font color="#5c3300">About Us</font></u></strong></h2>
<p align="center"><font color="#5c3300"><strong>We</strong></font> are a small independent bakery based in Chilwell, Nottingham.<br />
<br />
<font color="#5c3300"><strong>We </strong></font>are passionate about baking, wanting to ensure our customers enjoy every moment and every bite of their cake.<br />
<br />
<font color="#5c3300"><strong>The</strong></font> business is registered with Broxtowe Borough Council and we have our facilities checked with Environmental Health.<br />
<br />
<font color="#5c3300"> <strong>We</strong></font> are trained in Food Hygiene with a Level 2 certificate in Food Safety for Catering.<br />
<br />
<font color="#5c3300"> <strong>We</strong></font> are fully insured for both public and product liability.</p>
<p align="center"><img src="Cake1.gif" width="100" height="75" /> <img src="cake2.gif" width="100" height="75" /></p>
</div>
</div>
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
try
height:100%;
height:100%;
not sure what is ur actual requirement...
do u need something like below ?
if so then,
do u need something like below ?
if so then,
#mainarea {
background-color: #F9F9F9;
width: 800px;
float: left;
margin-left:15px;
border:solid;
border-color:#5c3300;
border-width:2px;
height:500px;
overflow:auto;
}
overflow.JPG
Just add overflow:hidden to your .largeMain CSS rule.