Help making width of page really be 100%…

[schedal]

Hello folks, working on a complex design, it’s going very well, but I have one issue. Namely: I can’t get the container div’s to be 100% of the width, in the event that one of the elements on the page makes the width larger than it thought it was before…

example:

http://www.fountain-city.com/beta/section/links

if you have a large monitor: make the width be less than the right-menu: filter links" you will notice that the BG doesn’t fill the space correctly as it assumes that there is no need to scroll to the right when it assigns the width of the DIV.

How can I make this work? I tried "overflow: hidden" which only causes headaches, and also: "width:100%" on all div’s upwards from the one’s in question all the way to the top level [css: html] but it still thinks 100% is less than it actually is…

Am i stuck using tables here? would be a shame as otherwise this design is totally working [split flash/html boundaries, double opacity layers, jquery menu’s etc]

Thanks! :P

[nosecreek]

It could be done in Javascript:

Code:

document.getElementById(‘element’).style.width = document.body.parentNode.scrollWidth + ‘px’;

Although it would be better with pure CSS. Not sure how that could be done. Generally I would try to avoid sites that are going to require horizontal scrolling. I can’t see your whole site on my computer.

[schedal]

yes, I am aware of the width concern overall, this will still be corrected. The right column may even become conditional based on screen size [since this is never an absolute necessity to be seen, as it is just a filter] — in fact, if javascript is the only solution, I may just go ahead and "kill" the right column if the screen size is less than adequate [fail-back].

but it would be good, in general, to know if there is a CSS solution to this, as I am sure it will creep back in again in another project…
:-/ anyone know of a CSS solution?

Thanks,

Seb.

[bruizerbeans]

I don’t have a solution for you, but I have a question. When I look at your site from my laptop, I have horizontal scrolling. My screen is 14 inches. Is the horizontal scrolling something you are trying to avoid?

When I normally design a site I use a 960 grid framework. This framework works well on many monitors.

[schedal]

Thank you for your various recommendations, I will try for a combination of min-width and java script disabling of the right-column; plus the reduction of the width of some of the elements to something close to indeed 960 pixels.

Yes: horizontal scrolling is what I am trying to avoid, in general, but when it does occur, I am trying to have it so that the divs that are set to width:100% are actually 100%, because the scroll bars appear and force the page to have a greater width than the div’s think exists… so I end up with broken backgrounds.

Best,

Seb.

[Author]

Posts