6 replies [Last post]
sam_healy
Offline
newbie
Last seen: 15 years 50 weeks ago
Joined: 2003-08-07
Posts: 5
Points: 0

Hi,

I am designing a pure CSS site in which I have absolutely positioned the main content element in order to underlap some navigation elements.

The visual result of the absolute positioning is that the content element is moved about 200px left of its natural position.

Before the move, it extended to the right-hand edge of the browser window as intended, without an explicitly set width.

However, after moving it, there is a gap between the right-hand edge of the content element and the right-hand edge of the browser window, even after explicitly setting the width to 100%.

Weirdly, I can set the width to about 124% which *almost* removes the gap (2-15 pixels remain approx.) Anything higher generates scrollbars. But I am very wary about applying such logic-defying CSS to a site which is supposed to be cross-browser compatible.

Is there any other way of forcing an element to extend to an edge, regardless of its positioning offset? Thanks,

- Sam.

d3signmonk3y
d3signmonk3y's picture
Offline
Enthusiast
Toledo, Ohio
Last seen: 15 years 51 weeks ago
Toledo, Ohio
Timezone: GMT-4
Joined: 2003-07-29
Posts: 59
Points: 0

positioned DIVs and width (> 100%!) problems

Do you have a link to the page?

sam_healy
Offline
newbie
Last seen: 15 years 50 weeks ago
Joined: 2003-08-07
Posts: 5
Points: 0

Link

Yes, here it is:

http://www.ltscotland.com/shpsu/cmslite/

Thanks!

- Sam.

blakems
blakems's picture
Offline
Enthusiast
UTah, USA
Last seen: 16 years 15 weeks ago
UTah, USA
Timezone: GMT-7
Joined: 2003-04-07
Posts: 60
Points: 0

positioned DIVs and width (> 100%!) problems

what browser are you referring to. It looks fine in Mozilla

-bMs-
http//www.blakems.com !important;

sam_healy
Offline
newbie
Last seen: 15 years 50 weeks ago
Joined: 2003-08-07
Posts: 5
Points: 0

Oops!

My apologies, I gave you the homepage link instead of the sample content page. The problem page is

http://www.ltscotland.com/shpsu/cmslite/ndtestpage.asp

Mea culpa.

- Sam.

casey
casey's picture
Offline
Regular
Wisconsin, USA
Last seen: 5 years 12 weeks ago
Wisconsin, USA
Timezone: GMT-5
Joined: 2003-08-01
Posts: 17
Points: 0

Re: Oops!

I'm very new to CSS so I can't offer specific advice addressing your situation, but I can tell you what I see in IE 5 for Mac OS9.

Some of your left content is pushed off the screen and is inaccessible. I can scroll to the right, although it's unnecessary because there's nothing there to view.

One thing I did notice in your style sheet was underscores in the classes and IDs. I've found they work in the IE and Netscape but the W3C validator (http://jigsaw.w3.org/css-validator/) doesn't like them. For me it's a habit to type underscores more than anything else, and I always catch them too late and have to make a bunch of changes. Sad

Good luck!

sam_healy
Offline
newbie
Last seen: 15 years 50 weeks ago
Joined: 2003-08-07
Posts: 5
Points: 0

Solved!

For those who are interested, I managed to solve this problem by dynamically modifying the CSS via DOM. The page's onload and onresize events trigger the following function:

function expandContentPane(targetElementID) {
	targetelement = document.getElementById(targetElementID);
	currentPageWidth = document.body.clientWidth;
	contentpaneWidth = (currentPageWidth - 245); // to compensate for padding
	contentpaneWidth = paneWidth + "px"; // add pixel suffix
	targetelement.style.width = contentpaneWidth;
}

God bless DOM!