Link to home
Start Free TrialLog in
Avatar of Member_2_5230414
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:

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;

}

Open in new window


<!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>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of JustAndrei
JustAndrei
Flag of Belarus image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Chris Stanyon
Because you are floating both child DIVs, the .largeMain div won't have anything to auto height to.

Just add overflow:hidden to your .largeMain CSS rule.

try

height:100%;
not sure what is ur actual requirement...

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;

}

Open in new window

overflow.JPG