How To Make Your Site Size Concrete

When the person viewing my website would shrink the browser size, my website (text, layout, etc) became skewed.  The text was moving so that it could still be seen no matter how small the screen was.  I DID NOT WANT THIS because it was seriously effecting the layout of my site.

In order to make your website concrete so that it doesn’t move and skew with the browser size you must assign it a fixed width. (Note: I do not suggest assigning a fixed height)

Within your html file, directly under the <body> tag, create a <div> tag as follows:


<div id=”wrapper”>

Also, close your <div> tag right before you close your <body> tag at the end of the file.  It should look like this:



Your content will now go within the <div> wrapper that’s inside the <body> tag.

Next, in your CSS, create the section below:

#wrapper {

width: 760 px;

margin-left: auto;

margin-right: auto; }

*Note: You can set your width to whatever you want just be careful going too large or too small.

Finally, save both files and view.  You can see that the fixed width is what you set it.  If you drag your browser window to make it smaller, you can see that the site width is still fixed, and the layout doesn’t skew.


-Christina Ranalli

~ by christinaranalli on October 3, 2011.

%d bloggers like this: