PDA

View Full Version : create a Container that fits length of content automatically


Abbica
10-22-2010, 09:18 AM
Hi, I have a container, on a template, the code is below. I have a white background fill for the background and each webpage differs in length. I need this white fill to auto fill down to below the text which says site map & contact Us on each page. Unfortuantely, I have some pages with only 15 lines and some that are very long contact Us pages etc. For the white background to fill everypage and then stop scrolling down under the text, I had to put a background height in of 1880px on my template. This height on my template covers the length of my longest page but looks very odd on my pages with only 15 lines etc. A lot of white space below the text. Is there a way to make the container auto fit each page to just go below my text please?

#container {
width: 800px;
margin-right: auto;
margin-left: auto;
position: relative;
background-repeat: repeat-x;
background-color: #FFFFFF;
background-image: url(Images/GradientA.png);
height: 1880px;
}

dubaco
10-22-2010, 09:37 AM
I know what you mean, having been here myself but I'm a little confused, you say you have a white background fill but your css indicates a graduated image also?

Abbica
10-22-2010, 09:40 AM
Hi, I have an image up the top of the container. It is just a gradient fade into the white background. It is only 250px in length on repeat x.

dubaco
10-22-2010, 09:54 AM
Have you tried setting the height to "auto"?
It should then expand as it needs.
And if you want a bit of space below the text, add a return character or two.
The only trouble I had when I first did this (and it may not apply to you) is that I had a number of these together in a line and I learnt that I needed to add a "clearfloat" after them to get this to work.
P

Abbica
10-22-2010, 10:21 AM
Hi, I did put in auto, which does actually do what we wanted on my above post but unfortunately the background goes transparent again. Basically, this is what it looks like, I have my container, blue line all around my web page when selected, with my background image up the top, background colour white. But there is also at about 280pxs down from the top a blue line running across (dashed line when unselected), it is part of the container but that is were it is stopping the white backgrnd flowing. It stops at this blue line, leaving the remaining container transparent, so I have to return down down down the page to make the white fit to the bottom for previewing in the browser, which means it is not autofitting the content.

gentleone
10-22-2010, 10:40 AM
And if you want a bit of space below the text, add a return character or two.
Bad practice to give hard returns. If you want to adjust some spacing to elements there's padding and margin for.

Abbica
10-22-2010, 11:12 AM
I know, I just ended out fixing the height to 1880px.Can't figure it out.

kearnsy
10-22-2010, 11:20 AM
I thought if you didn't specify a height for the container or any of your other divs, then the content would contract & expand?

dubaco
10-22-2010, 11:20 AM
Bad practice to give hard returns. If you want to adjust some spacing to elements there's padding and margin for.

Yea, whoops, sorry about that!

gentleone
10-22-2010, 12:03 PM
You van try this. Add this to your stylesheet:

html, body {
width: 100%;
height: 100%;
}

And set the #container height to 100% instead of that 1880px.

Abbica
10-22-2010, 02:37 PM
Bye Jingo, you've cracked it. Thank you so much, did as you said apart from width, just used height, put that CSS in my style sheet, ,my container to 100% and it worked, autofitting the container, filling in white. That has been annoying me for ages, thank you for the relief, exhale now!!

Abbica
10-22-2010, 02:48 PM
By Jango, it only went down as far as 800 px on the screen then stopped. Inhale again but at this stage...give up, bad attitude but its a Friday Bank holiday weekend attitude. Fair enough!!