Hi I need help with some css. I am trying to make the page expand with based on the ammount of content on the page. so the more content the longer the page and so on. If you know how to do this please help.
mikeandike22 18 Nearly a Posting Virtuoso
Recommended Answers
Jump to Postblock-level elements such as divs automatically expand to enclose content...so I'm going to assume your request has a bit more detail that needs to be shared.
Describe your layout and what you are trying to accomplish.
Does it have more than one column and the divs are different …
All 4 Replies
FC Jamison 31 Posting Pro in Training Team Colleague
block-level elements such as divs automatically expand to enclose content...so I'm going to assume your request has a bit more detail that needs to be shared.
Describe your layout and what you are trying to accomplish.
Does it have more than one column and the divs are different sizes?
Are you having trouble setting your footer?
Is your containing div not expanding when you have inner div elements?
Some things can be resolved with css, others (to be completely reliable and cross-browser compatible) will require javascript.
mikeandike22 18 Nearly a Posting Virtuoso
ok well I have a layout where there is one column on the left of the content, a side navigation, the content, and then the footer I also need to have a background expand to the right as the browser window gets bigger. The entire layout has around 450 lines of css so I dont think I should post it.
FC Jamison 31 Posting Pro in Training Team Colleague
Well, the background of the second column is going to be your problem.
There is no way to do this exclusively with css that is cross-browser compatible. (Believe me, I have tried).
A lot of sites will tell you that setting the height of the body and/or html tags to 100% height will do the trick...and it will if your columns dont contain any nested divs...but throw in a nested div and some browsers will calculate the height of the column as the window height and you could end up with unwanted space at the bottom of your page. Being that you have a footer, this option probably won't work for you.
That being said, you have two options:
1. You could create a single background for the entire page that combines the backgrounds of the two columns in a single image.
2. You could write a javascript that calculates the height of the larger column and then sets the two columns to the same height.
The first option will only work if the background is solid (something that does not need to be centered in the column), or if your content is of a fixed width regardless of the monitor resolution.
mikeandike22 18 Nearly a Posting Virtuoso
thanks I will try it.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.