Expand div as more space as possible

[albertdt6]

Hi,
I created a template for a new page and I put a fixed width column on the left. I have a main content div which I want to expand the rest of the page. I leave you the fiddle: [http://jsfiddle.net/dyHr9/](http://jsfiddle.net/dyHr9/ “http://jsfiddle.net/dyHr9/”)

Note: I put a closer width of 82% but is not enough.

Thank you for your help!

[Eric Gregoire]

Depending on the browser support you’re looking at, CSS calc might be useful here: “width: calc(100% – 240px);” for “.mainContent”. That is, 100% width minus the width of the fixed-width left sidebar. There are other ways you could do it, but this might be easiest. Just beware browser support.

Support: http://css3clickchart.com/#calc

[albertdt6]

@Boogiesox Yeah I thought about using calc but as you said, not all browsers support it. It works but I need another way to do it with old-browser support.

[Eric Gregoire]

There is another way. Because your menu and the content divs are absolutely positioned, you can just nudge them into place. Here’s an updated Fiddle: http://jsfiddle.net/dyHr9/6/

I changed the main content to have no width, but to have the right: value at 0 to push the right side of .mainContent to the right and set the left value to the width of the sidebar, thus getting rid of the need for the left margin. Sorry, but I split up the CSS and cleaned up the code in the Fiddle to my liking. Not much changed anyway.

[Author]

Posts