Layout for screen resolutions

HI, I’ve been playing with a new template layout and found that on lower screen resolutions the content drops below the left column. On my existing site template I get a scroll bar at the bottom of the page but on this layout I don’t. Is there a no scroll tag can change for this or have I messed up somewhere
Thanks for all your help

To keep it simple (and because I have nothing to look at), that behavior is due to HTML/CSS layout decisions made by the designer. You likely won't be able to prevent that without really getting in deep with the template. Further comment would require a URL to look at.

sorry should of thought of that
this is what I'm playing with and hope to implement soon
h**p://stealth.xssl.net/~admin81/index.php?main_page=

First of all, you're including all your stylesheets twice. The designer may have hardcoded them into the template.

Second, remove the two width definitions in includes/templates/dart_template/css/stylesheet.css, around line 778.

#mainColumn {
width:86%;
width:86%;
}

Delete the red lines and the page will display normally.

Firebug is your best friend for CSS/HTML issues.

great thanks for your help I'll give it a shot

What screen width are you optimizing for? I looked at 1280 wide and the main content still dropped below the left column

not been able to get it right at all
works fine on mine at 1680x1050 but that's no good
removed the #mainColumn line (could only find one width entery to delete) and all the category content drops

You have to get rid of the double call to the CSS. You removed it from one but the other file overrides it.

BlindSide:

You have to get rid of the double call to the CSS. You removed it from one but the other file overrides it.

Took me a while but I worked out what you were saying and found a bit of code to remove in common/html_header.php and that seems to of removed the double call for css.
Still got the same problem though. Any more advice would be much appreciated.

stylesheet .css still has a width definition for #mainColumn at line 779:

#mainColumn {
width:84%;
}

The lines above have to go away. Do that, and the layout will behave itself.

BlindSide:

stylesheet .css still has a width definition for #mainColumn at line 779:

#mainColumn {
width:84%;
}

> The lines above have to go away. Do that, and the layout will behave itself.

When I remove it the page goes mad again so I put it back but I've removed it again to show it

Alright, from where it's at now, what do you want the page to do? Center the sidebar and main column in the same fashion as the footer?

Sorry this is taking so much of your time. I want it to sit in a similar way to our https://www.cuepower.co.uk site but I want the page to resize properly when shown on different screen resolutions.

Oooooooooh! That would have been good to know from the beginning. :lol: My bad for not asking the right questions.

Now that I know what you're doing, and I've dug enough in your CSS, I can safely tell you that there's no way you're going to do it with your current template, short of completely hacking it up.

The template you're using is fixed width; it's made to be a set width regardless of the browser's winodw size. Your existing site is fluid width, stretching automatically to fill the space. This is a cornerstone solution when building any template. To change from one layout to the other requires completely rebuilding, and is way beyond anyone's ability to support in forum posts.

Had I known what you were really after I would have given you the straight sooner. Sorry about that. :unsure:

No my mistake thanks for your help and I’m off to the drawing board again lol