Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Page width issues

Status
Not open for further replies.
Sep 7, 2009
29
US
Hello, For some reason my page width is 990. I want to constrict the width to 550px width. Can someone help me here is my code snippet.

<link type="text/css" href="css/cupertino/jquery-ui-1.8.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
collapsible: true
});
});
</script>
<style type="text/css">
<!--
li.MsoNormal
{mso-style-parent:"";
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";
color:windowtext; margin-left:0in; margin-right:0in; margin-top:0in}
-->
</style>
<!--[if !mso]>
<style>
v\:* { behavior: url(#default#VML) }
o\:* { behavior: url(#default#VML) }
.shape { behavior: url(#default#VML) }
table.MsoTableGrid
{border:1.0pt solid windowtext;
font-size:10.0pt;
font-family:"Times New Roman";
}
</style>
<![endif]--><!--[if gte mso 9]>
<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]-->
</HEAD>
<BODY style="text-align: left">
<body style="text-align: left">



<div id="tabs">
<h1>Services Index</h1>
<ul>
<li><a href="#tabs-1">A</a></li>
<li><a href="#tabs-2">B</a></li>
<li><a href="#tabs-3">C</a></li>
<li><a href="#tabs-4">D</a></li>
<li><a href="#tabs-5">E</a></li>
<li><a href="#tabs-6">F</a></li>
<li><a href="#tabs-7">H</a></li>
<li><a href="#tabs-8">I</a></li>
<li><a href="#tabs-9">M </a></li>
<li><a href="#tabs-10">N </a></li>
<li><a href="#tabs-11">O</a></li>
<li><a href="#tabs-12">P </a></li>
<li><a href="#tabs-13">R </a></li>
<li><a href="#tabs-14">S </a></li>
<li><a href="#tabs-15">T </a></li>
<li><a href="#tabs-16">V </a></li>
<li><a href="#tabs-17">W</a></li>
</ul>
<h1 align="center"></h1>
<div id="tabs-1" >

<TABLE width = "498" BORDER="1" CELLPADDING="1" cellspacing="1" style="border-collapse: collapse" >
<tr>

<td width="60" height="10" align="left" valign="top">
<strong><span style="font-size: 12px;" >Department</span></strong>
</td>

<td width="80" height="20" align="left" valign="top">
<strong><span style="font-size: 12px;">Phone</span></strong>
</td>

<td width="118" height="20" align="left" valign="top">
<strong><span style="font-size: 12px;">Services offered</span></strong>
</td>

<td width="95" height="20" align="left" valign="top">
<strong><span style="font-size: 12px;">Eligibility/Fees</span></strong>
</td>

<td width="188" height="20" align="left" valign="top">
<strong><span style="font-size: 12px;">Notes</span></strong>
</td>

</tr>

</table>

<table width="498" align="left" border="1" cellpadding="1" cellspacing="0">

<tr>
<td width="79" height="10" align="left" valign="top">
<strong><span style="font-size: 12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum arcu eu turpis sagittis dictum. Aenean in risus felis, ut hendrerit elit.
</span></strong>
</td>

<td width="69" height="20" align="left" valign="top">
<span style="font-size: 10px;"></span>
</td>
<td width="95" height="20" align="left" valign="top">
<span style="font-size: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum arcu eu turpis sagittis dictum. Aenean in risus felis, ut hendrerit elit. </span>
</td>

<td width="95" height="20" align="left" valign="top">
<span style="font-size: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum arcu eu turpis sagittis dictum. Aenean in risus felis, ut hendrerit elit. </span>
</td>

<td width="50" height="20" align="left" valign="top">
<p style="font-size: 10px;"></p></td>
</tr>

</table>



</tr>


</table>

</div>

<div id="tabs-2" >

<TABLE width = "498" BORDER="1" CELLPADDING="1" cellspacing="1" style="border-collapse: collapse" >
<tr>

<td width="60" height="10" align="left" valign="top">
<strong><span style="font-size: 12px;" >Department</span></strong>
</td>

<td width="101" height="20" align="left" valign="top">
<strong><span style="font-size: 12px;">Phone</span></strong>
</td>

<td width="181" height="20" align="left" valign="top">
<strong><span style="font-size: 12px;">Services offered</span></strong>
</td>

<td width="95" height="20" align="left" valign="top">
<strong><span style="font-size: 12px;">Eligibility<br>Fees</span></strong>
</td>

<td width="175" height="20" align="left" valign="top">
<strong><span style="font-size: 12px;">Notes</span></strong>
</td>

</tr>

</table>

<table width="498" align="left" border="1" cellpadding="1" cellspacing="0">

<tr>
<td width="46" height="10" align="left" valign="top" >
<strong>
</strong>
</td>

<td width="48" height="20" align="left" valign="top">

</td>
<td width="70" height="20" align="left" valign="top">
<span style="font-size: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum arcu eu turpis sagittis dictum. Aenean in risus felis, ut hendrerit elit. Nulla lacinia libero sit amet orci hendrerit at gravida nunc pulvinar. Integer aliquet mauris tortor. Vivamus sapien massa, posuere ac facilisis at, porta ultrices nunc. Vestibulum ac diam a sapien rutrum consequat.</span>
</td>

<td width="50" height="80" align="left" valign="top">

</td>

<td width="50" height="20" align="left" valign="top">
<p style="font-size: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum arcu eu turpis sagittis dictum. Aenean in risus felis, ut hendrerit elit. Nulla lacinia libero sit amet orci hendrerit at gravida nunc pulvinar. Integer aliquet mauris tortor. Vivamus sapien massa, posuere ac facilisis at, porta ultrices nunc. Vestibulum ac diam a sapien rutrum consequat.</p></td>
</tr>

</table>



</tr>


</table>

</div>


</div>
 
When you say your page, which part do you mean? I see some tables that are set to 498px width. Are these tables not that width? Or is it the rest of the page that is the problem? You have some CSS, that might define width of the div elements. Other than that, the page will always expand to the maximum of browser window width. Nothing in the code you've shown looks like it restricts page to either 990 or 550px.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
I have a 550 width limit on the website i'm uploading it to. There is white space on the right side of the page. How to define the width of the whole page to not go over 550px?
 
Provided that none of the elements themselves have a width greater than 550px, giving your body element [tt]style="width: 550px;"[/tt] should work. However, having white space on the right would suggest narrower (498) tables to me, not wider.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top