CSS div/overflow Question: Why does the first HTML file work but not the second?
- by kidvid
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>
