View Full Version : How do I make a centered site overflow?

03-16-2009, 11:19 PM
I would like my website to be centered even if the window width is smaller than my website's width. There should be no scroll bar, the right and left sides should just be cropped when they overflow.

The two images on the sides are 1px wide and should stretch to adapt the window resolution if it's larger than the website center.

Here is an image than explains exactly what i want:

And this is the code I have at the moment:
<body topmargin="0" leftmargin="0">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<td height="69" background="stretchingside.png">&nbsp;</td>
<td width="1278" height="69" align="center" background="center.gif">&nbsp;</td>
<td height="69" background="stretchingside.png">&nbsp;</td>

I'm beginning with web coding and i'm sure a HTML/PHP code could do the job. Could you guys help me?

These are the two images in case you want to test:
center.gif (http://img155.imageshack.us/img155/7210/center.gif)
stretchingside.png (http://img144.imageshack.us/img144/2729/stretchingside.png)



03-17-2009, 12:19 AM
Hello g1g010,
This will close down to the width of #wrap before getting any scrollbar. Does that help?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6 url(stretchingside.png) repeat-x;;
text-align: center;
* {
margin: 0;
padding: 0;
border: none;
#wrap {
width: 936px;
height: 69px;
margin: 0 auto;
background: url(center.gif) center;
<div id="wrap">
<!--end wrap--></div>

To make #wrap close down when the browser gets sized smaller can be done with percentages... like this - http://css-tricks.com/examples/PerfectFluidWidthLayout/

03-18-2009, 03:07 AM
Yes, that solved my problem!
Thanks a lot for your time.
My only problem right now is that, as you maybe figured, that's just the top of my site, the rest still has to be added. How can I fit this into a table? Because right now it looks like it's considered as the background of the whole page, not the background of a cell.

I'm used to only use Dreamweaver in Design mode, I rarely modify the code manually, as i'm more a designer than a coder. Pardon my coding ignorance and again thanks for the help.

03-18-2009, 04:13 AM
Nevermind, i found it.