Webpage resizing

Walshie · 29 Apr 2010, 02:42 PM

Apologies if you've seen this post in another section, I put it in by mistake.

Hi,

After searching the web and trying alot of different things i'm still stuck.

I have a website (www.justclothing.net) and most of the time the resizing works fine and the page displays how it should, like this: http://justclothing.net/Right.JPG

but occasionally the site displays like this: http://justclothing.net/Wrong.JPG

As you can see the page is too wide and a scrollbar appears at the bottom, i need the page to resize correctly every time.

Below is the relevant code, if anyone can point me in the right direction it would be a huge help, as said I've looked all over!

Thanks in advance
Chris

Code:

<body>
<div align="center">
	<table border="0" cellpadding="0" cellspacing="0" width="910" id="table3">
		<tr>
			
      <td align="right" height="28">{LOCATION}</td>
		</tr>
	</table>
</div>

<div align="center">
	<table class="table" border="0" cellpadding="0" cellspacing="0" width="910" id="table1">
		<tr>
			<td>
			<div align="left">
				
          <table border="0" cellpadding="0" cellspacing="0" width="100%" id="table2">
            <tr> 
              <td align="left" valign="top" width="1%"><img src="{INSTALLDIR}skins/{SKIN}/styleImages/1pxspacer.gif" width="5" height="94"> 
              </td>
              <td align="left" valign="MIDDLE" width="0%"><a href="{HOMELINK}"></a></td>
              <td class="topimage" align="left" width="0%"> <div align="left"> 
                  <table border="0" cellpadding="0" cellspacing="0" width="0%" id="table10">
                    <tr> 
                      <td align="left"></td>
                    </tr>
                  </table>
                </div></td>
            </tr>
            <tr> 
              <td align="left" valign="top" background="{INSTALLDIR}skins/{SKIN}/styleImages/menu-bg.gif" height="34" colspan="3"> 
                <div align="left"> 
                  <table border="0" cellpadding="0" cellspacing="0" width="100%" id="table4">
                    <tr> 
                      <td align="left" valign="top"><ul id="homeNav">
                          <li class="{HOMEPAGELI}"><a href="{HOMELINK}" class="{HOMEPAGELINK}">Home</a></li>
                          {PAGELINKSTOP} 
                        </ul>
                        {PAGELINKSTOPSUB}</td>
                    </tr>
                  </table>
                </div></td>
            </tr>
            <tr> 
              <td align="left" valign="top" colspan="3"> <div align="left"> 
                  <table border="0" cellpadding="0" cellspacing="0" width="100%" id="table5">
                    <tr> 
                      <td align="left" valign="top" width="170"> <div align="left"> 
                          <table border="0" cellpadding="0" cellspacing="0" width="100%" id="table6">
                            <tr> 
                              <td align="left" valign="top"> <img src="{INSTALLDIR}skins/{SKIN}/styleImages/1pxspacer.gif" width="2" height="1"></td>
                              <td align="left" valign="top" background="{INSTALLDIR}skins/{SKIN}/styleImages/catleft.gif"><div id="sideNavLeft">{CATEGORIES}{NAVCATEGORIES}{PAGELINKS}</div></td>
                            </tr>
                            <tr> 
                              <td align="left" valign="top">&nbsp;</td>
                              
                            </tr>
                          </table>
                        </div></td>
                      <td align="left" valign="top" width="5"> <img border="0" src="{INSTALLDIR}skins/{SKIN}/styleImages/1pxspacer.gif" width="8" height="1"></td>
                      <td align="left" valign="top"> <div align="left"> 
                          <table border="0" cellpadding="0" cellspacing="0" width="100%" id="table8">
                            <tr> 
                              <td align="left" valign="top">{SEARCHPROD}</td>
                            </tr>
                            <tr> 
                              <td align="left" valign="top"><div id="content"> 
                                  {PAGE} {PULLDOWNPROD} {PAGINATION} {ADDLINK} 
                                  {SUBNAV} {PRODS}{COMMENTS} {ADDCOMMENTS} {LINKS} 
                                  {COMPAREPRODS} {SIMILARPRODS} {PAGINATION} </div></td>
                            </tr>
                            <tr> 
                           
                            </tr>
                          </table>
                        </div></td>
                      <td align="left" valign="top" width="8"> <img border="0" src="{INSTALLDIR}skins/{SKIN}/styleImages/1pxspacer.gif" width="8" height="1"></td>
                      <td align="left" valign="top" width="121"> <div align="left"> 
                          <table border="0" cellpadding="0" cellspacing="0" width="100%" id="table9">
                            <tr> 
                              <td align="left" valign="top"><div id="sideNavRight">{FEATUREPROD}</div></td>
                            </tr>
                            <tr> 
                              <td align="left" valign="top">&nbsp; </td>
                            </tr>
                            <tr> 
                              <td align="left" valign="top"><div id="sideNavRight">{POPULARPROD}</div></td>
                            </tr>
                            <tr> 
                              <td align="left" valign="top">&nbsp;</td>
                            </tr>
                            <tr> 
                              <td align="left" valign="top">{TAGS}</td>
                            </tr>
                            <tr>
                              <td align="left" valign="top">&nbsp;</td>
                            </tr>
                          </table>
                        </div></td>
                    </tr>
                  </table>
                </div></td>
            </tr>
            <tr> 
              <td align="center" colspan="3"><a style="text-decoration: none;" href="{INSTALLDIR}sitemap.xml">Sitemap 
                | </a><a style="text-decoration: none;" href="http://www.Justclothing.net">Copyright 
                2010 Justclothing.net</a></td>
            </tr>
            <tr> 
              <td align="center" colspan="3"><div id="footer">{LINKDIR} {FOOTLINKS}</div>
                <br></td>
            </tr>
            <tr> 
              <td align="center" colspan="3">{META_KEYWORDS}<br>
                <br></td>
            </tr>
          </table>
			</div>
			</td>
		</tr>
	</table>
</div>

**Ellyn** · 30 Apr 2010, 12:13 AM

I'm not going to delve too deep here, but here are a couple of tips:

When you give something a width, specify the measurement. If you want it to be in pixels, type width="910px". This might help a bit.

You should have a look into using css for your layouts rather than tables and presentation html. Trust me: your code will be easier to deal with if you do.

Now, if I were to want to center something, and make sure that it stayed the same width as the page resized, here is a simple version of what I'd do.

HTML:

Code:

<div id="wrapper">
    <div id="content">
        <p>Content goes here</p>
    </div>
</div>

And then, in my css file:

Code:

#wrapper{margin-left: auto; margin-right: auto; width:910px; background-color:teal;}

The automatic left and right margins center it on the page, and I've just put the color and width in so you can see it were you to preview it.

I hope all this helps,

Ellyn

Thread: Webpage resizing

Thread Tools

Webpage resizing

Similar Threads

How do I create a webpage editor?

Posting Permissions