I'm stumped!

[mgisonno]

I don't seem to understand why floating something to 100% causes display issues with this layout... basically, I have a header, left column, middle column, right column. When I try to make a stretching box with rounded corners, i can't achieve it with any method because creating a middle area with a width of 100% causes like 800px of white space.... same for floated divs that have been clear:both'ed... here's the css and code:

CSS:

<!--

ul {list-style: none; margin: 0; padding: 0;}
img {border: none; margin: 0; padding: 0; display: block;}
form {margin: 0; padding: 0;}
a {text-decoration: underline; color: #336699;}
a:hover {text-decoration: none; color: #336699;}
.clear {clear: both;}
.right {float: right;}

/* AI.COM Bare bones page layout */
body, div {margin: 0; padding: 0; font-family: Verdana,Arial,Helvetica,Geneva,sans-serif}


#bodywrap {
text-align: left;
min-width: 772px;
max-width: 2600px;
/* This is experimental... IE min-width / max-width fix */
width: expression( (d = document)
&& (fs = 1.12)
&& (po = 2 * fs)
&& (bo = 3)
&& (min = 772)
&& (max = 2600)
&& (cw = d.body.clientWidth)
&& (px = 'px')
&& (cw - po >= max + bo ? max + px : cw - po <= min + bo ? min + px : 'auto')
);
}
#contentwrap {background: url(/images/backgrounds/sitenav_bg.gif) repeat-y;}
/* Used to turn off the left nav */
#contentwrapnl {background: #fff;}
#header {border-bottom: 1px #868686 solid;}
#main {margin-left: 191px;}
/* Used to turn off the left nav */
#mainnoleft {margin-left: 0;}
#menu {width: 191px; float: left; background: url(/images/backgrounds/sitenav_bg.gif) repeat-y;}
#maintop {padding: 0 0 0 10px; background: url(/images/backgrounds/sitepagetitle_bg.gif) repeat-x;}
#right {width: 150px;float: right; font-size: 80%;}
#left {margin-right: 150px; padding: 0 10px; font-size: 80%;}
/* Used to turn off the right content block */
#leftnoright {margin-right: 0; padding: 0 10px; font-size: 80%;}
#footer {clear: both; background: #fff;}
p {margin: 0;padding: 0 0 10px 0;}
.sf {margin: 0; padding: 0; float: left;}
.off {display: none;}
/* AI.COM Bare bones page layout */

/* Search stuff */
#searchbutton {background: #2e5882 url(/images/buttons/sitesearch_bg.gif) bottom repeat-x; color: #ffffff; border-top: 1px #ccc Solid; border-left: 1px #ccc Solid; border-right: 1px #868686 Solid; border-bottom: 1px #868686 Solid; font-weight: bold; padding: 1px 5px 1px 5px; width: 65px; font-size: 11px; cursor: pointer;}
#q {border: 1px solid #000; width:153px; height: 13px; font-size: 9px; margin-top: 1px;}
/* Search stuff */

/* This is for print */
#siteheadermidtext {display:none;}
/* This is for print */

/* Intuit Global Header */
#intuitglobal {background: #ffffff; height: 28px; border-bottom: 10px #ffffff solid;}
#intuitlogo {background: #ffffff; padding: 5px; float: left;}
#intuitglobalnav {padding-right: 10px; background: #666666 url(/images/backgrounds/gnav_slash.gif) no-repeat; width: 200px; height: 28px; float: right;}
/* Intuit Global Header */

/* AI.COM Global Header */
#siteheader {width: 100%; background: url(/images/backgrounds/siteheader_bg.gif) repeat-x;}
#siteheadermid {width: 100%; background: url(/images/backgrounds/siteheader.gif) center no-repeat; height: 40px; border-bottom: 1px #fff solid;}
#siteheaderbot {width: 100%; background: #cccccc; text-align: center; padding: 2px 0px 2px 0px; border-top: 1px #868686 solid; font-size: 80%;}
/* AI.COM Global Header */

/* AI.COM Global Content Section */
#sitemain {float: left; margin: 7px 0px 10px 10px;}
.sitemaintitle {font-size: 110%; font-weight: bold; padding: 5px 0px 5px 0px; border-bottom: 1px #868686 solid;}
.sitemainsubtitle {font-size: 90%; font-weight: bold; padding: 5px 0px 5px 0px; color: #333333;}
/* AI.COM Global Content Section */

/* AI.COM Global Breadcrumb */
#sitebreadcrumb {font-size: 70%; padding-top: 5px;}
#sitebreadcrumb a {color: #336699; text-decoration: underline;}
#sitebreadcrumb a:hover {text-decoration: none;}
/* AI.COM Global Breadcrumb */

#sitepagetools {font-size: 70%; height: 15px; margin-bottom: 10px; padding: 0 10px 0 0;}

/* AI.COM Global Footer */
#sitefooter {background: #666666; width: 100%; text-align:left; float: left; font-size: 90%;}
#sitefooterwrap {position: relative; bottom: 0px; left: 0px; margin: 0; padding: 0; width: 100%;}
#sitefooterwhite {background: #ffffff; font-size: 60%; font-weight: normal; padding: 5px; text-align:left;}
#sitefooter div {margin: 0px 30px 0px 5px; font-size:80%; float:left; padding: 2px 0px 1px 0px;}
#sitefooter div a {color:#fff; text-decoration:none; font-weight:bold;}
#sitefooter div a:hover {color:#fff; text-decoration:underline; font-weight:bold;}
/* AI.COM Global Footer */


/* AI.COM Site Navigation */
#sitenav {width: 190px; font-weight: bold; margin-top: 20px; font-size: 80%;}

/* MainNav */
#sitenav ul.main li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#sitenav ul.main li a:link, #sitenav ul.main li a:visited {color: #FFF; display: block; background: url(/images/backgrounds/sitenav.gif); padding: 8px 0 0 10px;}
#sitenav ul.main li a:hover, #sitenav ul.main li #current {color: #000; background: url(/images/backgrounds/sitenav.gif) 0 -32px; padding: 8px 0 0 10px;}

/* SubNav */
#sitenav ul.main ul.sub {border-top: 1px #868686 solid; font-weight: normal}
#sitenav ul.main ul.sub li a {
height: 20px;
voice-family: "\"}\"";
voice-family: inherit;
height: 20px;
text-decoration: none;
}
#sitenav ul.main ul.sub li a:link, #sitenav ul.main ul.sub li a:visited {color: #000; display: block; background: #c8c8c8; padding: 2px 0 0 20px;}
#sitenav ul.main ul.sub li #currentsub {color: #000; background: #c8c8c8 url(/images/bullets/current_dg.gif) 11px 6px no-repeat; padding: 2px 0 0 20px;}
#sitenav ul.main ul.sub li a:hover {color: #000; background: #ededed url(/images/bullets/current_lg.gif) 11px 6px no-repeat; padding: 2px 0 0 20px;}

/* SubNav Level2 */
#sitenav ul.main ul.sub ul.sub2 {border-top: 1px #868686 solid; border-bottom: 1px #868686 solid; font-weight: normal;}
#sitenav ul.main ul.sub ul.sub2 li a {
height: 20px;
voice-family: "\"}\"";
voice-family: inherit;
text-decoration: none;
}
#sitenav ul.main ul.sub ul.sub2 li a:link, #sitenav ul.main ul.sub ul.sub2 li a:visited {color: #000; background: #ededed; padding: 3px 0 0 30px;}
#sitenav ul.main ul.sub ul.sub2 li a:hover, #sitenav ul.main ul.sub ul.sub2 li #currentsub2 {color: #000; background: #ffffff url(/images/bullets/current_wt.gif) 21px 7px no-repeat; padding: 3px 0 0 30px;}
#sitenav ul.main ul.sub ul.sub2 li a.sm {height: 20px;}
#sitenav ul.main ul.sub ul.sub2 li a.bg {height: 35px;}
#sitenav ul.main ul.sub li a.sm {height: 20px;}
#sitenav ul.main ul.sub li a.bg {height: 35px;}
/* AI.COM Site Navigation */


-->

[mgisonno]

XHTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="description" />
<meta name="keywords" content="keywords" />
<title>Intuit's Online Resource for Accounting and QuickBooks Advisors</title>

<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="style2.css"/>
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />
<script>

(function(){

/*Use Object Detection to detect IE6*/
var m = document.uniqueID /*IE*/
&& document.compatMode /*>=IE6*/
&& !window.XMLHttpRequest /*<=IE6*/
&& document.execCommand ;

try{
if(!!m){
m("BackgroundImageCache", false, true) /* = IE6 only */
}

}catch(oh){};
})();
</script>
<script src="/includes/scripts/global.js" type="text/javascript"></script>
</head>

<body>
<div id="bodywrap">

<div id="header">
<div id="intuitglobal">
<div id="intuitlogo">
<a href="http://www.intuit.com/"><img src="/images/logos/gnav_logo_intuit_sm.gif" alt="Intuit" width="67" height="14" /></a>
</div>
<div id="intuitglobalnav">
<a href="http://www.intuit.com/offerings/index.jhtml?priorityCode=3730236349"><img src="/images/buttons/gnav_intuit_products_off.gif" alt="" width="74" height="28" class="right" /></a><img height="28" src="/images/backgrounds/gnav_shade.gif" alt="" width="9" class="right" /><img height="28" src="/images/backgrounds/gnav_vdiv.gif" alt="" width="2" class="right" /><img height="28" src="/images/backgrounds/gnav_shade.gif" alt="" width="9" class="right" /><a href="http://www.intuit.com/commerce/catalog/category.jhtml?categoryid=cat0000000000006332722&amp;prioritycode=3730336349"><img src="/images/buttons/gnav_intuit_home_off.gif" alt="" width="60" height="28" class="right" /></a><div class="clear"></div>

</div>
<div class="clear"></div>
</div>
<div id="siteheader">
<div id="siteheadermid">
<div id="siteheadermidtext"><h3>Intuit's Online Resource for Accounting and QuickBooks Advisors</h3></div>
</div>
<div id="siteheaderbot">



<div style="text-align: center; width: 400px; margin: 0 auto;">
<form id="thesearchform" action="http://intuitsearch.intuit.com/search" method="get">
<div class="sf"><input value="xml_no_dtd" name="output" type="hidden" /></div>
<div class="sf"><input value="accountant_site" name="client" type="hidden" /></div>
<div class="sf"><input value="accountant_site" name="site" type="hidden" /></div>
<div class="sf"><input value="accountant_site" name="proxystylesheet" type="hidden" /></div>
<div class="sf"><input value="10" name="num" type="hidden" /></div>
<div class="sf" style="padding-top: 1px;"><strong>Search This Site</strong>&nbsp;&nbsp;</div>

<div class="sf"><input type="text" name="q" id="q" />&nbsp;&nbsp;</div>
<div class="sf"><input type="submit" value="Search" id="searchbutton" /></div>
<div class="clear"></div>
</form>
</div>



</div>
</div>

</div>


<div id="contentwrap">


<div id="menu">

<!--Begin Site Left Nav-->
<div id="sitenav">

<ul class="main">
<li><a id="current" href="/products_services/index.aspx">Products &amp; Services</a>

<ul class="sub">
<li><a href="/products_services/quickbooks_financial_software/index.aspx" class="sm">QuickBooks</a>


<ul class="sub2">
<li><a href="index.html" class="sm">What's New in 2007</a></li>
<li><a href="index.html" class="sm">Compare Products</a></li>
<li><a href="index.html" class="sm">Accountant Edition</a></li>
<li><a href="index.html" class="sm">ProAdvisor Program</a></li>
<li><a id="currentsub2" href="index.html" class="sm">Simple Start</a></li>

<li><a href="index.html" class="sm">Online Edition</a></li>
<li><a href="/products_services/quickbooks_pro/index.aspx" class="sm">Pro</a></li>
<li><a href="index.html" class="sm">Pro for Mac</a></li>
<li><a href="index.html" class="sm">Premier Editions</a></li>
<li><a href="index.html" class="sm">Enterprise Solutions</a></li>
<li><a href="index.html" class="bg">Enterprise Accountant Edition</a></li>

<li><a href="index.html" class="sm">Merchant Services</a></li>
<li><a href="index.html" class="sm">Point of Sale</a></li>
</ul>

</li>
<li><a href="index.html" class="sm">Payroll</a>

</li>
<li><a href="index.html" class="sm">Professional Tax</a>


</li>
</ul>

</li>
<li><a href="index.html">Training &amp; CPE</a>

</li>
<li><a href="index.html">Resources</a>

</li>
<li><a href="index.html">Member Programs</a>


</li>
<li><a href="index.html">Support</a>

</li>
<li><a href="index.html">Community</a></li>
</ul>
<br /><br />

</div>
<!--End Site Left Nav-->

</div>



<div id="main">
<div id="maintop">

<div id="sitebreadcrumb">
<a href="/?lid=breadcrumb">Home</a><a href="http:///?lid=breadcrumb/"></a>
</div>
<div class="sitemaintitle">

QuickBooks Simple Start Edition 2007
<br>
<div class="sitemainsubtitle"></div>


</div>


<div id="sitepagetools">
<div style="float: right;">&nbsp;&nbsp;<a href="javascript:OpenT('/misc/ratethispage_popup.aspx', 550, 420);" class="medText">Rate this page</a></div><div style="padding-top: 2px; float:right;"><img src="/images/icons/icon_feedback.gif" alt="" height="11" width="11" /></div><div style="float:right;">&nbsp;&nbsp;<img src="/images/backgrounds/sitepagetools_sep.gif" width="1" height="14" style="display:inline;" alt="" />&nbsp;&nbsp;</div><div style="float: right;">&nbsp;&nbsp;<script type="text/javascript">emailPage();</script></div><div style="padding-top: 2px; float:right;"><img src="/images/icons/icon_email.gif" alt="" height="11" width="11" /></div><div class="clear"></div>
</div>

</div>
<hr class="off" />

<div id="right">
<!--Start Right Column Content-->

<div style="background: #ccc; border: 1px solid #000;">hi</div>

<!--End Right Column Content-->
</div>
<hr class="off" />

<div id="left">
<!-- Start Main Content-->


<div style="background: #ccc; border: 1px solid #000;">hi</div>

<br>
<style>

</style>

<div style="width: 10px; height: 10px; background: url(/images/box/rd_tl.gif) no-repeat; float: left;"></div>
<div style="height: 10px; border-top: 1px black solid; float: left;"></div>
<div style="width: 10px; height: 10px; background: url(/images/box/rd_tr.gif) no-repeat; float: left;"></div>
<div class="clear"></div>


<br />
<p>Content here</p>

<!-- Start Main Content-->
</div>
</div>


</div>

<div id="footer">
<div id="sitefooter">
<div><a href="/index.aspx">Back to home</a></div><div><a href="/privacy/index.aspx">Privacy</a></div><div><a href="/legal_notice/index.aspx">Legal</a></div><div><a href="/contact_us/index.aspx">Contact Us</a></div><div><a href="http://www.intuit.com/about_intuit/">About Intuit</a></div><div><a href="http://intuit2.informative.com/intuitACDC/portal/home">Feedback</a></div>
<div class="clear"></div>
</div>

<div class="clear"></div>
<div id="sitefooterwhite">&copy; 2006 Intuit, Inc. All rights reserved.</div>
</div>

</div>
</body>
</html>

[mgisonno]

http://www.distinctivewebsolutions.com/problem.gif :confused:

[sutabi]

Here are two example:

http://www.gorilla3d.com/nini/
http://brutedesigns.com/

#1 The egde of the left box represent rounded edges
#2 ... horrible css hacking, have fun

[mgisonno]

I don't see anything at those links... anyone else... please click this link to see the problem

click here (http://www.distinctivewebsolutions.com/problem.gif)

[sutabi]

Okay that third one... thats supose to be the left menu?

[mgisonno]

yes, and the left menu is floated left with a hard width of 190px

[mgisonno]

i think it looks like it's just making the middle column un-wrap... but then again, it puts half the content up in the top and the rest wraps like 500px's below...

[sutabi]

You are going to have to choose absolute positioning,

Put divs in this order:
Left Menu - Float: left;
Right Menu - Float: right;
Middle Content - position: absolute; left: 0px; width: 100%; margin-left: 190px; margin-right: 150px;