Hi all,

I'm new to the site and relatively new to HTML and CSS. I just started working on a web site for this non-profit group I've been volunteering for and I just finished doing the best I could on the homepage. Now that I have that set up, I want to make a Dreamweaver Template out of it so that the header, footer, and news column on the left side appear on every page. However, the issue I'm having right now is I can't seem to make it so that if I add extra news items in the news column, for example, the news column will expand and so that its parent divs will expand as well to accomodate it. I need it to work this way since every page will be usng the template and they can't all have the same heights due to variation in content. I've tried doing 'height:auto' for the wrapper and main divs but the white background and outside border disappear and some of the elements move out of place...

Here is the link so you can see what I have so far: The Mercy Project - Under construction
The CSS stylesheet can be found here: Style sheet

I'm looking for any suggestions as to how I can change my code to make it behave as described above.

Any other suggestions as to other ways I can improve what I've done so far are more than welcome since I'm totally new to this and want to do the best job I can.

As I said this is my first post in this forum so I hope I'm not leaving out any necessary details...

- Omelas

I don't know anything about dreamweaver templates, but I know that an webpage will be as tall as it needs to be for its content (you don't need to set the height). If it gets bigger than the browser window it just scrolls, so no special height specifications needed.

That's not what I'm getting though. I have a main content div inside a wrapper div and the wrapper div doesn't seem to expand when the content inside the main div extend further that their container...

Seems to be working fine here, can you visually (screenshot of the actual issue) demonstrate the problem??

This could turn out to be a problem with using the float: attribute (i'm not sure if you're using it or not), but in that case, just add before the wrapper's </div>, <div style="clear:both"></div>.

Are you testing in in firefox or IE.

This does appear because you are using fixed size div for the news box and main content area.
As far as I am aware IE will push a fixed height div down relative to
the content in it.
Firefox tends to push the content down but not the div so the content will
over run the the div when it supposed to contain it and mess up the design.

Removing the fixed height for the main div and newsbox should resolve your issue as mentioned already.
But it could mean that other parts look empty especially if the newsboxs
is bigger than the content area.

As your site has not got any content that is over running we cannot see an example of what is happening

Find all of the containers that you want to be able to expand
Replace the height with a min-height attribute that has the same value as height


Layouts are almost always easier to do using html tables rather than css. You'll get what you expect 99 times out of 100.

This post has been edited by ImportedNoob: 30 Jun, 2009 - 01:22 PM

This is not recommended unless your using tablature data.

As said above that is not a good approach to web development, using something less supported because it's "easier". Which, btw, if you learned XHTML and CSS correctly, it's not.

Shall we just wait and see what the OP says about the already given solutions?

You can find an example of the problem here.

I'm testing with both Firefox and IE.

I placed the clear:both div right before 'wrapper's closing div tag and it made wrapper extend to include the content which helped, thanks Mage.

Other than that several problems still arise. I change the height attributes to min-height for the main div and the newsBox div but it didn't change anything.

Here are the problems I'm trying to fix:

• I want the newsBox to have at least the height it has now, but I want it to extend with the 'main' div if ever the 'main' div is expanded due to its content.
• I want the footer to be at the bottom of the content, i.e. the 'main' div at all times, so if the 'main' div is extended vertically, the footer should still be at the bottom of it.
• I don't want the "Home | Contact Us | FAQ | Privacy Policy" links in the footer to be moved when the content overflows the 'main' div.

I've changed the height attribute to min-height for both the newsBox and the 'main' div but as you can see, this hasn't changed anything.

Any more ideas?
Thanks for the help you've provided me with this far.

For problems number 2+3 (footer related) just move the footer div above the div with clear: all on it

Your first "problem" would need to be done with Javascript as there's no other way when using a floated div. However I think it looks fine just the way it is.

Oh and, you're welcome

Alright I got it working as I want it to by following Mage's tip (thanks again).

Now I'm going to look into how to write a javascript code that assign my newsBox a height so that it just touches the footer. I'd have thought that there'd be a way to give a div a min height and have it take on the height of it's parent div as well but I suppose I need a conditional statement and that's why javascript is necessary...

Thanks to everyone who contributed!

No problem!

You'd just do something like:

The following should do all three without using javascript.
You just need to be creative on how you cut the images.
You will need to tweak it alittle to include your menu section but that should be easy enough to do.

html code



CSS code


You can see an example here



This post has been edited by neit: 2 Jul, 2009 - 05:46 AM

Using a margin... That's a strange way of accomplishing the task, but good idea nontheless

Wow thanks for all the great responses.

It's working perfectly now thanks to all your suggestions. I opted to use javascript to have a clean and clear solution that only took a couple of lines of code:



Now the only issue I'm having is that the background image I'm using repeats itself when the newsBox is made to expand and it looks weird... I've been trying to think of a way to do this. I obviously don't want to include a separate style sheet for every page to link to a different image... I would like to find a way to size the image dynamically based on the size of the newsBox but without simply repeating itself. Is there any way to make it stretch?

The only solution I can think of at the moment is to stop using a background image for the div and instead just place an image there which I can warp using the height attribute and then place the text above the picture. I would like to find a more elegant solution though.

Any suggestions?
neit, how did you make the picture expand for the newsBox in your sample?

The area that has the repeating background image, add...

Should do it.

You can make it repeat vertically or horizontally by using repeat-y or repeat-x, respectively.

If I set it to no-repeat, the image appears once in the div and the rest of the div beneath the image is whitespace. What I'm trying to do is have the background image vertically stretched so that it covers the div without repeating itself.

This post has been edited by Omelas0469: 2 Jul, 2009 - 02:02 PM

The sample I made consists of 3 images.
1) The header which includes the menu and the top of the sidebar
2) The main bg image is a small strip of the site from the left border
to the right about 10px in height.

3) The footer includes the a small part at the bottom of the sidebar.

If you use firefox you should be able to right click on each section and select
view background image. This will show you the 3 images.
The actual main content and side bar background covers the whole site but because the header and footer images are over the top you do not
see and it appears seamless.

Everytime you run into a new problem it would be best to include a like so we can see what's happening.

This post has been edited by neit: 2 Jul, 2009 - 02:42 PM