•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 397,800 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,416 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 3387 | Replies: 4
![]() |
•
•
Join Date: May 2004
Location: Boston,MA
Posts: 1,362
Reputation:
Rep Power: 7
Solved Threads: 16
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.
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.
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.
•
•
Join Date: May 2004
Location: Boston,MA
Posts: 1,362
Reputation:
Rep Power: 7
Solved Threads: 16
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.
Last edited by mikeandike22 : Aug 8th, 2006 at 12:44 pm.
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.
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.
Last edited by FC Jamison : Aug 8th, 2006 at 1:00 pm.
![]() |
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
- css based shopping cart (eCommerce)
- CSS scrollbar ??? (JavaScript / DHTML / AJAX)
- Please Review My New Website (Website Reviews)
Other Threads in the HTML and CSS Forum
- Previous Thread: Linking Help Needed!
- Next Thread: Iframe not working.



Linear Mode