I'm trying to separate my form into sections with fieldsets but once I add more than 1 on my page, it expands past the footer instead of staying inside the container. The page is on an internal site so all I can do is post the code here. External CSS files have been pasted into code. Anyone have any ideas? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Online Store</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> html, body {height: 100%; /*width: 100%;*/ padding: 0; margin: 0;} body {margin: 0; padding: 0;font: 76%/1.5em Arial, Helvetica, sans-serif; background: #EEEEE7 url('../images/header1.gif') repeat-x left top; color: #333; text-align: left; } * {margin: 0; padding: 0;} a {color:#00529C; text-decoration: none;} a:focus { outline:none;} a:visited {color: #555;} a:hover {color: #60A6E5; text-decoration: underline;} h2, h3, h4, h5, h6, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: bold; padding: 0; margin: 0; color: #555;} h2 {font: bold 1.35em Arial, Helvetica, sans-serif; color: #555; text-align: left; margin: 0; padding: 3px;} h1 { font-size: 1.5em;} h3 { font-size: 1.2em; text-transform: none;} hr {color:#CCC;background-color:#CCC;height:1px;border:none; width: 96%; text-align: center; margin: 0.5em 0;} p {margin-top: 0.3em;} p + p {margin-top: 1.2em;} h3+p {margin-top: 1.2em;} iframe {float: left; margin: 0; padding: 0; width: 770px; height: 600px;} dl, dt, dd {color: #333; margin: 0; padding: 0 0 0.5em 0; } dl {display:block; padding:0.4em;} fieldset, img {border: 0;} .clear {clear: both;} div#container {position:relative; /* needed for footer positioning*/ margin:0 auto; width:960px; background: url('../images/bgd_container.gif') repeat-y left top; height:auto !important; height:100%; /* IE6: treaded as min-height*/ min-height:100%; } div#content {min-height: 640px;} #topheader {float: left; width: 960px; height: 75px; background: url('../images/header1.gif') repeat-x left top; padding: 0; margin: 0; clear: both;} h1#topImg {height: 1px; text-indent: -2000px;} #logo { float:left; width:210px; height: 75px; padding: 1.7em 1em;} #login { float:right; width:701px; height: 75px; padding-top: 1.7em; text-align: right; color: #FFF;} #leftColumn { float:left; width:180px; padding: 2em 1em;} #rightColumn #rightnav {padding-left: 1.5em;} #rightColumn #rightnav li {margin-bottom: 1em; list-style-image: url('../images/icon_leftnavlist.gif');} #rightColumn #rightnav li a {color: #00529C; font-size: 120%; font-weight: bold;} #rightColumn #rightnav li a:hover {color:#60A6E5; text-decoration: none;} #rightColumn #rightnav li a span {color: #555; display: block; padding: 0.1em 0.1em 0 0.2em; text-align: left; text-decoration: none; font: normal 60% Arial, Helvetica, sans-serif; line-height:1;} #rightColumn { float:left; width:180px; padding: 1.4em 1em;} #rightColumn h2 span, #middleColumn h2 span {color: #6DBFF9;} #middleColumn { float:left; width:731px; padding: 2em 1em;} #rightDiv {font-size:1.1em; padding:0.3em 0; color: #555;} #rightDiv span {font-size:0.8em; line-height: 1em;} #rightDiv a {font-size:0.8em;} #rightDiv span a {font-size:1em;} #leftDiv {width: 180px;} ul.allLists, ol.allLists {margin: 0 0 0 0.9em; padding: 8px 4px 0 0; list-style-type: none; /*url("../images/arrows.png");*/} ol {margin: 0.3em 0 0 0.4em; font-size: 98%;} ul.allLists li, ol.allLists li , ul.subLists li {padding: 0 0 1em 0;} ul.allLists li ul.submenu, ol.allLists li ul.submenu {list-style-type: none;} ul.allLists li ul.submenu li, ol.allLists li ul.submenu li, ul.subLists li ul.submenu {margin: 0 0 0 0.9em; padding: 0 4px 0 0;} ul.allLists li strong, ol.allLists li strong {color: #060C56;} ul.subLists, ol.subLists {margin: 0 0 0 1.3em; padding: 8px 4px 0 5px; list-style-type: square;} ul.catalog, ol.catalog {margin-left:2.1em; padding: 0 0.4em 1em; list-style-type: none;} h3.copier , h3.janitorial, h3.computers, h3.laboratory, h3.ud, h3.safety, h3.office, h3.furniture, h3.webforms{ width: 170px; height: 27px; white-space: nowrap; cursor: help;} h3.copier {background: url('../images/icon_copier.gif') no-repeat left top; padding: 0.2em 2.3em;} h3.janitorial {background: url('../images/icon_janitorial.gif') no-repeat left top; padding: 0.2em 2.3em;} h3.computers {background: url('../images/icon_computer.gif') no-repeat left top; padding: 0.2em 2.1em;} h3.laboratory {background: url('../images/icon_laboratory.gif') no-repeat left top; padding: 0.2em 1.7em;} h3.ud {background: url('../images/icon_ud.gif') no-repeat left top; padding: 0.2em 1.7em;} h3.safety {background: url('../images/icon_safety.gif') no-repeat left top; padding: 0.2em 2.3em;} h3.office {background: url('../images/icon_office.gif') no-repeat left top;padding: 0.2em 1.4em;} h3.furniture {background: url('../images/icon_furniture.gif') no-repeat left top; padding: 0.2em 1.9em;} h3.webforms {background: url('../images/icon_webforms.gif') no-repeat left top;padding: 0.2em 2.3em;} table.catgrid {} table.catgrid tr {vertical-align: top;} tablel.catgrid td {width: 33%;} table.catgrid td span {color: #555; display: block; font: normal 70% Arial, Helvetica, sans-serif; line-height: 1em; white-space: nowrap;} #globalnav li {list-style: none; display: inline; line-height: 2.25em; font-size: 0.9em;} #globalnav li a {padding: 0.25em 0.5em 0.25em 0.75em; color: #FFF; text-decoration: none;} #globalnav li a:link {color: #FFF;} #globalnav li a:hover {text-decoration: underline;} #globalnav strong {padding-right: 0.5em; color: #6DBFF9;} #icons {width: 725px; padding: 2em 0;} #icons ul li img {border: none; padding-top: 1em;} #icons ul {float: left; margin: 0;} #icons ul li {list-style: none;margin: 0;display: inline;padding: 0 1.7em 0;} #icons ul li a {font-size: 95%; text-decoration: none; color: #00529C;} #icons ul li a:hover {color: #60A6E5; text-decoration: underline;} #nav {margin:0; padding:0; background:#000 url('../images/bgd_nav.gif') 0 0 repeat-x; width:100%; float:left;} #nav li {display:inline; padding:0; margin:0;} #nav li a:hover {background: transparent url('../images/bgd_nav1.gif') top left no-repeat;} #nav li a {display: block; height: 35px; padding-left: 35px; float: left; font-family: Arial, Helvetica, sans-serif; color: #FFF; text-decoration: none;} #nav li a span {display: block; float: left; height: 27px; padding-top: 8px; padding-right: 35px; cursor: pointer;} span.small {color: #333; display: block; padding: 0.1em 0.1em 0 0.2em; text-align: left; text-decoration: none; font: italic 85% Arial, Helvetica, sans-serif; line-height:1;} .smallOther {font-size: 85%; font-style: italic; color: #333;} form.myaccount { width: 550px; font-size: 1.0em; color: #555; } form.myaccount legend { font-size: 1em; color: #FFF; padding: 0.3em; font-weight: 900; background: url('images/bgd_form.png') repeat-x left top; } form.myaccount label { text-align: inherit; width: auto; } form.myaccount label span {color: #333; text-align: right; font-weight: bold;} table {width: 100%;} table td{padding: 2px; margin: 3px;} th {color: #333; text-align: right; font-weight: bold; width: 45%; vertical-align: top;} td {width: 55%; vertical-align: top;} form.myaccount fieldset { padding : 15px; border: 1px solid #7F9DB9; } form.myaccount input.submit { margin-left: 103px; } input, textarea, select { margin: 0; padding: 1px; font-size: 100%; font-family: inherit; border: 1px solid #7F9DB9; } /* BUTTONS */ /*button a, button{ display:block; float:left; font-family: Arial, Verdana, sans-serif; font-size:100%; line-height:130%; text-decoration:none; font-weight:bold; color:#565656; cursor:pointer; padding:5px 10px 6px 7px; }*/ button{ width:auto; overflow:visible; padding:4px 10px 3px 7px; /* IE6 */ } button[type]{ padding:5px 10px 5px 7px; /* Firefox */ line-height:17px; /* Safari */ } *:first-child+html button[type]{ padding:4px 10px 3px 7px; /* IE7 */ } button img, button a img{ margin:0 3px -3px 0 !important; padding:0; border:none; width:16px; height:16px; } button, button a.positive{background-color: #EFEEEA; color:#060C56; border: 1px solid #7F9DB9;} button a.positive:hover, button.positive:hover{background-color:#36F;border:1px solid #060C56;color:#FFF;} </style> <!--[if lt IE 7]> <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /> <![endif]--> </head> <body> <div id="container"> <div id="topheader"> <h1 id="topImg">UDMart</h1> <div id="logo"><img src="images/logo2.png" alt="UDMart" /></div> <div id="login"> <!--<a href="cart.html"><img src="images/cart.png" alt="Shopping cart" /></a> Cart: 2 items --> <div id="globalnav"> <strong>Welcome Susie Sample</strong> <ul> <li><a href="myaccount.html" title="My Account">My Account</a></li> <li><a href="#" title="Help">Help</a></li> <li style="border-right: none;"><a href="#" title="Log out">Log out</a></li> </ul> </div> </div> </div> <div id="content"> <div id="middleColumn"> <h2>My <span>Account</span></h2> <form class="myaccount " id="form2" method="post" action=''> <fieldset> <legend>Shipping Address</legend> <table> <tr> <th><label>Name:</label> </th> <td><input type="text" value="Susie Sample" name="name" id="name" /></td> </tr> <tr> <th><label>Department:</label> </th> <td><input type="text" value="IT-WD" name="dept" id="dept" /></td> </tr> <tr valign="top"> <th><label>Address:</label></th> <td> <table> <tr valign="top"> <td style="padding: 0; margin: 0;" colspan="3"><input type="text" name="wcsave_c00_HomeStreet1" id="wcsave_c00_HomeStreet1" size="30" maxlength="50" value="192 blah" onchange="strip_blanks(this);" onblur="CheckField(this.form,this,'');" /><span class="small">Address 1</span></td> </tr> <tr valign="top"> <td colspan="3"><input type="text" name="wcsave_c01_HomeStreet2" id="wcsave_c01_HomeStreet2" size="30" maxlength="50" value="" onchange="strip_blanks(this);" /><span class="small">Address 2</span></td> </tr> <tr valign="top"> <td><input type="text" name="wcsave_c02_HomeCity" id="wcsave_c02_HomeCity" size="25" maxlength="25" value="blah" onchange="strip_blanks(this);" onblur="CheckField(this.form,this,'');" /><span class="small">City</span></td> <td><input name="wcsave_c03_HomeState" type="text" id="wcsave_c03_HomeState" onblur="CheckField(this.form,this,'');" value="blah" size="2" maxlength="2" /><span class="small">State</span></td> <td><input type="text" name="wcsave_c04_HomeZip" id="wcsave_c04_HomeZip" size="15" maxlength="15" value="blah" onchange="strip_blanks(this);" onblur="CheckField(this.form,this,'');" /><span class="small">Zip/Postal Code</span></td> </tr> </table> </td> </tr> <tr> <th><label>Phone:</label> </th> <td><input value="302-555-5555" type="text" name="phone" id="phone" /> <span class="smallOther">(use format nnn-nnn-nnnn)</span></td> </tr> <tr> <th><label>E-mail:</label> </th> <td><input value="sample@udel.edu" type="text" name="email" id="email" /> <span class="smallOther">(use format xxx@xxx.xxx)</span></td> </tr> <tr> <th> </th> <td><!--<button type="submit" class="positive"><img src="images/tick.png" alt="Submit"/>Submit</button> --></td> </tr> </table> </fieldset> <fieldset> <legend>Default Account</legend> <table> <tr> <th><label>Name:</label> </th> <td><input value="Susie Sample" type="text" name="name2" id="name2" /></td> </tr> <tr> <th><label>Department:</label> </th> <td><input value="IT-WD" type="text" name="dept3" id="dept3" /></td> </tr> <tr valign="top"> <th><label>Address:</label></th> <td> <table> <tr valign="top"> <td style="padding: 0; margin: 0;" colspan="3"><input type="text" name="asdf" id="asdf" size="30" maxlength="50" value="192 S. Chapel St." onchange="strip_blanks(this);" onblur="CheckField(this.form,this,'');" /><span class="small">Address 1</span></td> </tr> <tr valign="top"> <td colspan="3"><input type="text" name="fgh" id="fgh" size="30" maxlength="50" value="" onchange="strip_blanks(this);" /><span class="small">Address 2</span></td> </tr> <tr valign="top"> <td><input type="text" name="ghjk" id="ghjk" size="25" maxlength="25" value="Newark" onchange="strip_blanks(this);" onblur="CheckField(this.form,this,'');" /><span class="small">City</span></td> <td><input name="kl" type="text" id="kl" onblur="CheckField(this.form,this,'');" value="DE" size="2" maxlength="2" /><span class="small">State</span></td> <td><input type="text" name="rtu" id="rtu" size="15" maxlength="15" value="19716" onchange="strip_blanks(this);" onblur="CheckField(this.form,this,'');" /><span class="small">Zip/Postal Code</span></td> </tr> </table> </td> </tr> <tr> <th><label>Phone:</label> </th> <td><input value="302-555-5555" type="text" name="fh" id="fh" /> <span class="smallOther">(use format nnn-nnn-nnnn)</span></td> </tr> <tr> <th><label>E-mail:</label> </th> <td><input value="sample@udel.edu" type="text" name="gg" id="gg" /> <span class="smallOther">(use format xxx@xxx.xxx)</span></td> </tr> <tr> <th> </th> <td><button type="submit" class="positive"><img src="images/tick.png" alt="Submit"/>Submit</button></td> </tr> </table> </fieldset> </form> <div class="clear"></div> </div> <div id="rightColumn"> <div id="rightDiv"> <ul id="rightnav"> <li><a href="catalog.html" title="Create an order">Create an order<span style="font-size:0.6em; ">Browse the Product Catalog</span></a></li> <li><a href="javascript:;" title="Order history">Order history<span>View a listing of your past orders</span></a></li> <li><a href="javascript:;" title="Problems?">Problems?<span>Find the answer</span></a></li> </ul> </div> </div> </div> </div> </body> </html> Code (markup):
You've given the container a min-height but the fieldsets are floated. Floating an element removes it from the normal flow. You might be better served by giving the container an 'overflow:auto' so it expands with the floats. EDIT: Well, apparently not, since it makes the page jump off the edge of the viewport but the reason why it spills out of the container remains the same. You have more going on there than I have time to look at.