CODEWITHSUNDEEP
csshtmlbrowsercenter
sparks
sparks

Reputation: 79

Center Website at small resolution

i've got the following problem. I Have a website with all elements centered. The Content Part is a div with the width of 1060px, margined 0 auto. Works fine so far.

The Problem is when i set the browser size to 1024 this div doesn't center but starts from the left side. This div also has an inner padding of 40px. When in the small resolution you can see the padding on the left but not the one of the right side..

long question short... what to do i have to do to have the website always being centered, no matter what size the browser window has..

Edit1: The logic problem is that every browser places the website on the left "border" of the window when reducing the width of the browser window. Is there a workaround to prevent this? So that the browser "moves" the page "negative" beyond the left side of the browser ?

thanks in advance

Upvotes: 0

Views: 273

Answers (3)

Talha Akbar
Talha Akbar

Reputation: 10040

html {
width:100%;
height:0 auto !important;
background: /* Any Background */;
}
body {
position:relative; // no need of wrapper if use this
top:0;
width:1060px;
// other properties here but no margin properties
}

$(document).ready( function() {
var q = $("html").width();
var w = $("body").width();
if (q <= w) {
q = w;
}
var e = q/2;
var r = w/2;
var left = e-r;
$("body").css({ "left":left+"px" });
});

or if you don't like it!

http://css-tricks.com/snippets/css/centering-a-website/

Upvotes: 0

atmd
atmd

Reputation: 7490

If you have a fixed width which is larger then your screen, then this will happen once you get a browser which is smaller.

Have you considered making it responsive, maybe having something like

.container{
  width:100%;
  max-width:1060px

/* then any other styles, margin etc */
}

That way your main container will resize with the browser?

responsive design by Ethan Marcotte is a great book to learn more on responsive websites.

heres a link to a book apart

Upvotes: 1

bobthyasian
bobthyasian

Reputation: 943

CSS:

body {
width: 99%;
max-width: 1060px;
min-width: 800px;
margin: auto 0;
}

Using percentages is safer but it can cause issues with positioning and such. Minimize the risk by using min/max.

Upvotes: 1

Related Questions