View Full Version : Fixed width with continuous height

12-18-2009, 12:11 AM
Hello All,
A problem that is boggling my mind. I'm trying to create a web page with a fixed width (900 px) and a liquid height, so that when my page's content expands the height of the div will follow. I have a container div with an image anchored to the bottom. Essentially acting as a background for all of the content, including a footer. Unless I dictate both a width and a height for the container div the page doesn't work.
I've tried setting the body to 100% /100% then giving the container div a value of 900 px X 100%, and also leaving the height value blank. Nothing seems to work.
Thanks for anyone who has any thoughts or ideas.

12-18-2009, 05:09 AM
Are you saying that the div height doesn't change when content is added?

You might want to post a link for us to look at.

12-18-2009, 11:15 AM
Unfortunately, the site is only local on my computer, but yes, there are additional divs within the container div. The container div has an image as part of the background and the image is positioned (Y) on the bottom of the div.
Thanks for the response.

Here is the page code:

<body id="body">
<div id="container">

<div class="PPheader" id="header">

<div id="navBar">
<div class="navButton" id="navButton"><a href="index.html">Home</a></div>
<div class="navButton2" id="navButton"><a href="ourPeople.html">Our Staff</a></div>
<div class="navButton" id="navButton"><a href="dogWalking.html">Dog Walking</a></div>
<div class="navButton2" id="navButton"><a href="dogSitting.html">Dog Sitting</a></div>
<div class="navButton" id="navButton"><a href="holidays.html">Holiday Rates</a></div>
<div class="navButton2" id="navButton"><a href="poochPals.html">Pooch Pals</a></div>
<div class="navButton" id="navButton"><a href="testimonials.html">Testimonials</a></div>
<div class="navButton2" id="navButton"><a href="contactPage.html">Contact Page</a></div>
<div id="email"><a href="mailto:princesspawz@yahoo.com" class="email">princesspawz@yahoo.com</a></div>

<div id="copy">
<h2> Dog Sitting:</h2>
<p>If you are leaving on vacation and prefer to leave your dogs at home in their familiar surroundings instead of boarding them or sending them to a kennel, then the standard options are visits twice a day or three times a day. This includes being fed, administering any necessary medications, being let out to potty and some cuddle time!<br />
Fee: $30 = 2 visits per day+ $5/additional dog /visit $40 = 3 visits per day + $5/additional dog/visit</p>
<p>Overnight care in your own home is also available: we will spend the night in your home with your dog, then during the day he/she will be taken out for multiple walks and playtime. Also includes all feedings at normally scheduled times.<br />
Fee: $50/24-hour period </p>

<div id="contactinfo">Princess Pawz, LLC | Amber DiNenna - Owner/Operator | Charlestown Navy Yard - MA | 617-276-5160</div>



And the css for the container:
#body #container {
background-color: #9FC6D1;
width: 900px;
padding-top: 25px;
margin-right: auto;
margin-left: auto;
left: auto;
right: auto;
background-image: url(pPawsImages/walkingPawz.jpg);
background-position: bottom;
background-repeat: no-repeat;
margin-bottom: auto;
height: 700px;(Without setting this value to a specified amount, the container div seems to nest behind this div <div class="PPheader" id="header"></div>})

12-18-2009, 12:01 PM
It would be really useful to see the rest of your CSS to check if items are floated or if you have used absolute positioning on any of them.

You could tidy up the container CSS as well. Not sure why;
left: auto;
right: auto;

are in there.

One thing you might try is clearing any floats by using the info in this article;


Hope it helps