My markup is below. I’m trying to create a div element (templateContainer), which has several floated divs that will be layed out horizontally creating a horizontally scrollable viewport. However, I don’t want the width the the parent container to exceed the viewport width.
The problem I’m having is that when I apply css to make the “bodytextArial” table 100%, its not 100% of the viewport (the actual browser width) but rather, it expands to the width of the templateContainer element.
What am I missing?
table {width:95% !important; overflow:scroll}
.templateContainer {width:8500px;}
.previewTemplates {width:100%;overflow:scroll;}
.templatetable {width:100%;overflow:scroll;}
<table width="800" class="bodytextArial">
<tr>
<td colspan="4">
<style type="text/css">.templateContainer {width:8500px;}</style>
<table class="templatetable"><tr><td class="templates">
<div class="intro">
<div class="previewTemplates" style="position:relative;box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);-webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);-moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);">
<div class="templateContainer" style="border:none">
<!--content goes here that will exceed the width of the parent contain but should create a scrollbar on the this container and not the parent table container
</div>
</div>
</div>
</td></tr>
</table>
</td>
</tr>
</table>