I have my div (#box) centering in the middle of the browser window which is groovy for browsers that are 600px vertical or taller. If the window is smaller than that, content at the top of the div gets sheared off, and the scroll bar only scrolls the page up (when I pull the scroll bar down), so it's impossible to see anything hidden above the top edge of the window even when the scroll bar is at its top-most position.

Here's how I center my div--you can see why the top of the div gets cut off in smaller browser windows.

{position: absolute; top: 50%; left: 50%; width: 1930px; height: 607px; margin-left: -965px; margin-top: -302px;}

(It's really wide to acmodate the animation working on even the widest screens--the width isn't an issue.)

Here's a page to look at: /
And my CSS: .css

This is easily fixed in my CSS style sheet, but it seems like I can't have it both ways for monitors greater than 600px and monitors smaller than 600px.

So, how do I detect a browser window size and then select one of two different CSS style sheets? One for small windows, another for larger windows? Is there a jquery script that will do this for me?

Or, is there another way to make my div center in the middle of the browser window with CSS that will allow scrolling so that the top of the div can be accessed on smaller browser windows?

Thanks for your thoughts!

I have my div (#box) centering in the middle of the browser window which is groovy for browsers that are 600px vertical or taller. If the window is smaller than that, content at the top of the div gets sheared off, and the scroll bar only scrolls the page up (when I pull the scroll bar down), so it's impossible to see anything hidden above the top edge of the window even when the scroll bar is at its top-most position.

Here's how I center my div--you can see why the top of the div gets cut off in smaller browser windows.

{position: absolute; top: 50%; left: 50%; width: 1930px; height: 607px; margin-left: -965px; margin-top: -302px;}

(It's really wide to acmodate the animation working on even the widest screens--the width isn't an issue.)

Here's a page to look at: http://ianmartinphotography./test-site/
And my CSS: http://ianmartinphotography./test-site/css/basic.css

This is easily fixed in my CSS style sheet, but it seems like I can't have it both ways for monitors greater than 600px and monitors smaller than 600px.

So, how do I detect a browser window size and then select one of two different CSS style sheets? One for small windows, another for larger windows? Is there a jquery script that will do this for me?

Or, is there another way to make my div center in the middle of the browser window with CSS that will allow scrolling so that the top of the div can be accessed on smaller browser windows?

Thanks for your thoughts!

• javascript
• jquery
• css
• centering

• 1 Frankly your design is the issue and you're trying to solve it with workarounds. For one there are better solutions for vertical centering that won't pull the content under the browser's top edge. Look into display:table-cell. Secondly your website is entirely invisible without Javascript which will affect your Google ranking and people like me who run NoScript or disable Javascript out of general concern for security. In short your site breaks the Number 1 rule of HTML/CSS which is to degrade gracefully. – SpliFF Commented Mar 20, 2011 at 2:14
• 2 @spliff, Thank you for taking the time to write! I appreciate your concern. The vast majority of my visitors use javascript. Google can usually read js without any trouble, read more here: goo.gl/cPdiM – ian_6500 Commented Mar 21, 2011 at 22:43

7 Answers 7

@media queries are my preference (saw that you don't like them as a solution per se), but they really could do the trick - especially if you adjust your css a little to acmodate.

<link...media="only screen and (max-height: 600px)" href="small-device.css" />
    small-device.css = div.container { ... height:500px; margin:50%; ...}

<link...media="only screen and (min-height: 601px)" href="big-device.css" />
    big-device.css = div.container {... height:600px; margin:50%; ...}

You may also have a little more luck by removing your absolute positioning and taking advantage of normal document flow. It would help you to add things like { overflow-y:scroll; } to those hidden-by-screen-height divs.

I think in the end, if you're trying to design around hand-held devices, you'll need media queries to some extent. My Android screen (for example) has 3 display options (low, medium, hi def). All 3 crop pages differently.

You can determine window size by Jquery

$(window).width();
$(window).height();

or

$(document).width();
$(document).height();

then change css

$("link").attr("href", "blue.css");

Something like this:

$(document).ready(function(){

 if($(document).height()  > 600 or $(window).height() > 600){

   $("link").attr("href", "600+.css");

 } else {

   $("link").attr("href", "600-.css");

 }
});

A solution that works in all major browsers. No JS needed. Vertically/horizontally centered, scrollable, sticks to the top when content is larger than viewport.

HTML:

<div id="body">[your content goes here]</div>

CSS:

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

html {
    display: table;
}

body {
    display: table-cell;
    vertical-align: middle;
}

#body {
    margin: 0 auto;
}

Don't forget to apply the last rule, it will actually perform the horizontal centering.

Just did a bit of googling and found this:

http://www.ilovecolors..ar/detect-screen-size-css-style/

does that work for you?

Try the Less CSS Framework: http://lessframework./,

You do not need JavaScript, but rather you can use CSS @Media to set styles based on resolution/ screen size.

Best of luck

Use the following JavaScript conditional to detect screen size.

function x() will handle inserting the CSS link in the <head> tag. All you need to do is call the function and pass in the CSS file name.

< script type = "text/javascript" >
<!--
function x(y) {
    var styles = y;
    var newSS = document.createElement('link');
    newSS.rel = 'stylesheet';
    newSS.href = 'data:text/css,' + styles;
    document.getElementsByTagName("head")[0].appendChild(newSS);
}

if ((screen.width >= 1024) && (screen.height >= 768)) {
    x('file.css');
}
else {
    x('file1.css');
}
//-->
< /SCRIPT>

If "document_height" not work, try "window_height" i ment it in code!

$("link").attr("href", "css_file_path"); // here must insert path to your css, replace it in the code below

<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.5.1/jquery.min.js" ></script>

<script type="text/javascript">

$(document).ready(function(){

document_height = $(document).height();
//window_height = $(window).height();

//if(window_height  > 600){
 if(document_height  > 600){
    alert('Bigger than 600px height: ' + $(document).height());
   $("link").attr("href", "600+.css"); // Here load css if window is bigger then 600px;

 } else {
    alert('Smaller than 600px height: ' + $(document).height());
   $("link").attr("href", "600-.css"); // Here load css if window is smaller then 600px;

 }
});

</script>