Page not resizing to content

ShanMa

05-29-2009, 01:32 AM

Hi,

I'm having an issue with my css. When there is a table or image on my page that is larger than the window size I get a large gap where the rest of the layout is resizing to the window size, not the content size including the table or image.

The page is here: http://se.nrmspace.com.au/nrmweather/awsview.php?stationID=collection

http://se.nrmspace.com.au/nrmweather/stylesheet.css

To replicate the problem resize your window so that it is narrower than the image.

Same problem in IE, Chrome & FF.

I don't think this is a clear fix issue as I tested it without the floating side menu with the same results.

Any help would be appreciated.

ShanMa

06-01-2009, 02:44 AM

Still looking for a solution on this.

Apostropartheid

06-01-2009, 04:44 PM

You could try a min-width on the container?

ShanMa

06-02-2009, 01:23 AM

Thanks, I have though of using min-width but the image sizes change. I don't want to force the largest page width when it won't always be necessary.

rmedek

06-02-2009, 02:00 AM

The page is reacting that way because the image is dynamically rendered. It's reading the width of <html>'s content as one width, then loads the image, which is bigger than that width.

What I would do is take <html> out of the flow so it reacts more to the browser window. Try changing your CSS from this:

html, body {
height: 100%;
width: 100%;
}

…to this:

html, body {
height: 100%;
float: left;
}

Hope that helps…

ShanMa

06-02-2009, 03:40 AM

Looks interesting. I will give it a go.

The solution I'm using at the moment is overflow-y: hidden, overflow-x: auto, but there is vertical scrolling required to find the horizontal scroll bar so not the best.