how to set a maximum width for the website and make it scrollable

how to set a maximum width for the website and make it scrollable

I have a page in my webapp that contain 3 textbox side by side as they all
display important information. However, if i were to reduce my browser
size, my twitter bootstrap navbar and my slideshow header will follow the
size of the browser and fit 100% as mentioned in my codes
<div id="Slideshow">
<img src="image/s1.jpg" name="slide" style="width:100%; height:150%">
<script type="text/javascript">
<!--
var step = 1
function slideit() {
document.images.slide.src = eval("image" + step + ".src")
if (step < 5)
step++
else
step = 1
setTimeout("slideit()", 2500)
}
slideit()
//-->
</script>
</div>
<div id="twitterbootstrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">iPolice's Menu</a>
<div class="nav-collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li><a href="AdminAddAccount.aspx">AddAccount</a></li>
<li class="divider-vertical"></li>
<li><a href="AdminDropAccount.aspx">Drop Account</a></li>
<li class="divider-vertical"></li>
<li><a href="AdminEditProfile.aspx">Edit Account</a></li>
<li class="divider-vertical"></li>
<li><a href="AdminColdStorage.aspx">Cold Account</a></li>
<li class="divider-vertical"></li>
<li><a href="AdminReportCheck.aspx">Report Check</a></li>
<li class="divider-vertical"></li>
<li><a href="AdminLogout.aspx">Logout</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
As you can see i set my slideshow as width:100%. However as for my table
and textbox, this is how it is
<table width="100%">
<tr>
<td id="admintaskdetail">
<b>Details </b>
<asp:TextBox ID="tbdetails" runat="server" Height="120px"
TextMode="MultiLine" Width="400px"
ReadOnly="True"></asp:TextBox>
</td>
<td id="admintaskpropertydetail">
<b>Property Details:</b>
<asp:TextBox ID="tbproperty" runat="server" Height="120px"
TextMode="MultiLine" Width="400px"
ReadOnly="True"></asp:TextBox>
</td>
<td id="admintasksuspectdetail">
<b>Suspect Details:</b>
<asp:TextBox ID="tbsuspect" runat="server" Height="120px"
TextMode="MultiLine" Width="400px"
ReadOnly="True"></asp:TextBox>
</td>
</tr>
</table>
Unfortunately, this is how my website look. My navbar and slideshow are
exactly the same width.

In order to counter that, i tried to wrap my navbar, header and the
contents under a id called wrapper and code like this which didnt work
either
#wrapper {
width:80%;
overflow:scroll;
margin: 0 auto;
}
May i know the correct way on how to set a maximum width for my website
and then make the overflow part scrollable after the maximum width? I was
hoping to make my navbar and twitterbootstrap navbar to stop following the
browser after a particular width by wrapping them under a wrapper id which
didnt work as well.
Regards.
Been trying for days and still failed to get it out.