I'm on my first web site build using an older computer with a smalller monitor. The site looked fine until I published it and looked at it using a 19" monitor. The web page slides to fit the user's monitor's width. So the layout looks embarrassingly strange on a larger monitor. The fix I am looking for is to have two blank side "bars" (one right and one left) that would do the sliding to fill the empty space. I'd like to keep the web page content a fixed width and let the side bars slide to fill the monitor's screen.

I appreciate any help with this. I've spent quite a bit of time already trying to fix it but have not been able to come up with the answer.


3 answers

PaulBM 103

Try wrapping the webpage in a div tag, set it's width to the desired size of your site. Also set the margin to auto, to make it centred in the browser's window.


<body><div id="mysite">


div#mysite { width: 900px; margin:auto; }

Answered over 9 years ago by PaulBM

You could define the float:left, width on the stylesheet for each section like left column, center column, right column.

The main container if you want to centralise it:

container {

margin: 0px auto; } so the main container comes to center rest

And also if you like you can then use an image with different left and right sides, and repeat + center it:

body { background: url(bg.png) top center repeat-y; }

hope this helps

Answered over 9 years ago by Felicia
Tom B. 0

Great! Thank you very much for the answers. I'll see if I can get this to work.

I appreciate your help. Tom

Answered about 9 years ago by Tom B.