Notice how the first HTML/CSS works when you re-size the browser horizontally. It will shrink no further than around 800 pixels, but it will expand as far as you drag the right edge of the browser. It will also correctly overflow the table at the top
and scroll it horizontally.
The thing I don't like about the first code snippet is where the scrollbar is. I want it to show up within the borders of the fieldset, so even if I narrow the browser down to 800 pixels wide, I can see both the left
and right sides of the fieldset's border.
The second code snippet is exactly the same as the first except I add another div tag to the mix, inside of the field set
and around the grid. Notice how the top fieldset's width won't correctly shrink when you make the viewport of your browser narrower. Any ideas on why it doesn't work, what I can do to get it to work like the first code snippet?
I don't think I'm describing this clearly, but if you run the two side by side,
and expand
and contract the horizontal edge of your browser windows, you'll see the differences between the two.
I'm pretty new to
CSS and HTML layout, so my understanding of why
CSS handles sizing the way it does in some situations is still really confusing to me.
Thanks,
Adrian
Working
HTML file:
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>
<style type="text/css">
#divBody {
margin-top: 5px;
top:24px;
margin-top: 10px;
}
#divContainer
{
top: 5px;
position:relative;
min-height:100%;
#width:expression(document.body.clientWidth < 830? "800": "90%" );
width:90%;
min-width: 800px;
padding-bottom:70px;
}
#divMasterGrid {
position:relative;
margin:5px;
top:5px;
width:99%;
margin:0 auto;
overflow-x:scroll;
}
#divRadioButtonArea {
position:relative;
top:20px;
height:51px;
font-size: 12px;
width:99%;
margin:5px;
}
</style>
<title>TEST TEST</title>
</head>
<body id="divBody">
<div id="divContainer" class="gridRegion">
<div id="divMasterGrid">
<fieldset style="margin: 5px;">
<legend style="font-size: 12px; color: #000;">Numbers</legend>
<table border="1px">
<tr>
<td>One
</td>
<td>Two
</td>
<td>Three
</td>
<td>Fout
</td>
<td>Five
</td>
<td>Six
</td>
<td>Seven
</td>
<td>Eight
</td>
<td>Nine
</td>
<td>Ten
</td>
<td>Eleven
</td>
<td>Twelve
</td>
<td>Thirteen
</td>
<td>Fourteen
</td>
<td>Fifteen
</td>
<td>Sixteen
</td>
<td>Seventeen
</td>
<td>Eighteen
</td>
<td>Nineteen
</td>
<td>Twenty
</td>
</tr>
</table>
</fieldset>
</div>
<div id="divRadioButtonArea">
<fieldset style=" padding-left: 5px;">
<legend style="color: #000; height:auto">Colors</legend>
<table style="width:100%;padding-left:5%;padding-right:5%;">
<tr>
<td>
<input type="radio" name="A" value="Y"/><label>Red</label>
</td>
<td>
<input type="radio" name="O" value="O"/><label>White</label>
</td>
<td>
<input type="radio" name="W"/><label>Blue</label>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
</body>
</html>
Broken
HTML file:
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>
<style type="text/css">
#divBody {
margin-top: 5px;
top:24px;
margin-top: 10px;
}
#divContainer
{
top: 5px;
position:relative;
min-height:100%;
#width:expression(document.body.clientWidth < 830? "800": "90%" );
width:90%;
min-width: 800px;
padding-bottom:70px;
}
#divTopFieldSet {
position:relative;
margin:5px;
top:5px;
width:99%;
}
#divRadioButtonArea {
position:relative;
top:20px;
height:51px;
font-size: 12px;
width:99%;
margin:5px;
}
#divTable {
position:relative;
width:99%;
margin:5px auto;
overflow-x:scroll;
}
</style>
<title>TEST TEST</title>
</head>
<body id="divBody">
<div id="divContainer" class="gridRegion">
<div id="divTopFieldSet">
<fieldset style="margin: 5px;">
<legend style="font-size: 12px; color: #000;">Numbers</legend>
<div id="divTable">
<table border="1px">
<tr>
<td>One
</td>
<td>Two
</td>
<td>Three
</td>
<td>Fout
</td>
<td>Five
</td>
<td>Six
</td>
<td>Seven
</td>
<td>Eight
</td>
<td>Nine
</td>
<td>Ten
</td>
<td>Eleven
</td>
<td>Twelve
</td>
<td>Thirteen
</td>
<td>Fourteen
</td>
<td>Fifteen
</td>
<td>Sixteen
</td>
<td>Seventeen
</td>
<td>Eighteen
</td>
<td>Nineteen
</td>
<td>Twenty
</td>
</tr>
</table>
</div>
</fieldset>
</div>
<div id="divRadioButtonArea">
<fieldset style=" padding-left: 5px;">
<legend style="color: #000; height:auto">Colors</legend>
<table style="width:100%;padding-left:5%;padding-right:5%;">
<tr>
<td>
<input type="radio" name="A" value="Y"/><label>Red</label>
</td>
<td>
<input type="radio" name="O" value="O"/><label>White</label>
</td>
<td>
<input type="radio" name="W"/><label>Blue</label>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
</body>
</html>
