Member Avatar for mikeandike22

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.

  • 2 Contributors
  • 4 Replies
  • 221 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by mikeandike22

Dani AI

Generated

Short answer: use modern CSS (Flexbox or Grid) so the left nav and main content naturally grow with their content and the "right" background fills the remaining width — no JS or image-spriting required for current browsers. As noted, older techniques (a single background image or JS equalizer) were common; today Flexbox/Grid are simpler and more reliable, with fallbacks for very old browsers.

Minimal HTML skeleton:

<body>
  <div class="page">
    <aside class="sidebar">side nav</aside>
    <main class="content">page content</main>
  </div>
  <footer>footer</footer>
</body>

CSS (keeps footer below content, makes columns equal height, right area expands):

html, body { height:100%; margin:0; }
body { min-height:100vh; display:flex; flex-direction:column; }
.page { display:flex; flex:1; }
.sidebar { width:220px; background:#eee; }
.content { flex:1; background:#fff; padding:20px; }
footer { height:60px; }

Troubleshooting & notes:

  • If the page is centered with a fixed-width wrapper but you still want a full-viewport right background, apply the background to the flex column (.content) — it will stretch to fill available space — or use a CSS gradient/multiple-background on body to simulate columns.
  • For sticky-footers, keep body as a column flex container and let .page take flex:1.
  • If supporting very old browsers (IE7/8 era), use fallback techniques: display:table/table-cell, a faux-column background image, or the JS equalizer mentioned.
  • Debugging tips: remove any fixed heights, inspect element boxes with DevTools, and test with long and short content to confirm the footer behavior.

This approach reduces fragile height hacks and keeps your layout responsive as content or viewport size changes.

Recommended Answers

All 4 Replies

Member Avatar for FC Jamison

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.

Member Avatar for mikeandike22

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.

Member Avatar for FC Jamison

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.

Member Avatar for mikeandike22

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.