owosso Posted December 1, 2008 Share Posted December 1, 2008 I've been tweeking, adding, subtracting, ect., and in the process an unwanted space appeared below the #right column. It appears when there isn't much content and the #right is short. My intention is to have #left height expand as necessary, according to #right's height. It appears to do so, except in these short cases. You'll note I have a repeating background image in the #horizontalContainer. This image visually is for the #left, however I couldn't get it to repeat there for some reason so I put it in the #horizontalContainer.I thought this may be the problem but the same thing happens when I remove the background image.My siteMy CSS body { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; padding: 0px; background-color: #4B4745; font-size: 62.5% /* 16px × 62.5% = 10px */; margin-top: 10px; } * {margin: 0; padding: 0; }html,body { width: 100%; height: 100%; }/* Do not forget this is applied to both HTML and BODY */p { font-size: 1.2em; color: #393533; line-height: 1.6em; }li.bullet1 { font-size: 1.2em; color: #393533; line-height: 1.6em; list-style-type:disc; list-style-position:outside; margin: 0 0 0 20px; } /* Bullet margins don't show up properly in design mode but do online. The text flows to second line in alignment indented with text */ li.bullet2 { font-size: 1.2em; color: #393533; line-height: 1.6em; list-style-type:disc; list-style-position:outside; margin: 0 0 0 40px; }/* Bullet margins don't show up properly in design mode but do online. The text flows to second line in alignment indented with text */ .alignLeftNoBorder { float: left; }.alignLeft { float: left; border: #635C59 1px solid; padding: 2px; margin: 0 10px 0 0; }.alignRight { float: right; border: 1px solid #635C59; padding: 2px; } .alignCenter { display: block; margin: 0 auto 0 auto; border: #635C59 1px solid; padding: 2px; } .indent { margin: 0 0 0 40px; } .outdentList { text-indent: -18px; font-weight: bold; } a.image { /* hotspot logo */ display: block; /* a tag must be a block */ width: 223px; height: 94px; background: url(images/subLogo.gif) 0 0 no-repeat; border: 0; float: left; } a.image:hover { /* definition of the "image" class for <a> tag when hovered onto */ background:url(images/subLogoRoll.gif);/* source for target image */ } a.obit { display: block; /* a tag must be a block */ width: 226px; /* width of reactive image */ height: 46px; /* height of reactive image */ background-image:url(images/indexObit.gif);/* source for start image */ background-repeat: no-repeat; border: 0; float: left; } a.obit:hover { /* definition of the "image" class for <a> tag when hovered onto */ background-image:url(images/indexObitRoll.gif);/* source for target image */ border: 0; } h1 { color:#393533; font-size: 1.8em; text-align:center; } h2 { color:#963F3F; font-size: 1.4em; text-align:left; } h3 { color:#393533; font-size: 1.4em; text-align:left; } h4 { color:#393533; font-size: 1.4em; text-align:right; } h5 { color:#393533; font-size: 0.9em; padding-top: 12px; text-align:center; } h6 { font-size: 1.2em; color: #393533; line-height: 1.6em; text-align:right; font-weight:normal; } #horizontalContainer { height: auto; width: 760px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; background-color:#413D3B; background-image: url(images/indexMenu.gif); /*menu image is here so it continues the length of menu on each page, no matter the length*/ background-repeat: repeat-y; border: 2px #201d1c ridge; } a:link, a:visited { text-decoration: underline; color: #963f3f;} a:hover, a:active { color: #BC844F; text-decoration: underline; } #header { width: 760px; height: 95px; margin: 0 auto 0 auto; background-image:url(images/subHeaderFarm.jpg); background-position:right; background-repeat:no-repeat; background-color: #393533; }#header ul { margin: 0 0 0 230px; padding: 0 0 0 20px; width:200px; text-align:left; }#header li { list-style: none; display: block; padding: 8px 0 8px 0; }#header a { font-size: 1.2em; font-weight: bold; text-decoration: none; color: #FFC563; }#header a:hover { text-decoration: none; color: #EDE1C2; } #bar { position: relative; width: 760px; height: 25px; margin: 0 auto; background-image:url(images/indexBar.gif); background-repeat:repeat-y; }#left { float: left; height:auto; width: 226px; padding: 70px 0 200px 0; position: relative; } #left a { font-size: 1.4em; font-weight: bold; text-decoration: none; color: #FFC563; display: block; }#left a:hover { text-decoration: none; color: #EDE1C2; text-align: right; } #left ul { margin: 0; list-style:none; z-index: 500; padding: 0 30px 0 0; } #left li { padding: 11px 0 11px 0; text-align: right; position: relative; } #left ul ul li { padding: 0; }#left ul ul { position: absolute; top: 6px; left: 100%; width: 150px; z-index: 500; background-image: url(images/indexMenu.gif); background-repeat: no-repeat; padding:0; } #left ul ul li a { text-align: left; width: 138px; padding: 4px 0 4px 12px; z-index: 500; } #left ul ul li a:hover { text-align: left; width: 138px; z-index: 500; background-color:#656261; padding: 4px 0 4px 12px; } div#left ul li:hover ul,div#left ul ul li:hover ul { display: block; } div#left ul ul,div#left ul li:hover ul ul { display: none; } #rightHeading { float:right; width: 534px; position: relative; background-color: #EDE1C2; padding: 20px 0 0 0; text-align:center; z-index: 5; } #right { float:right; width: 434px; position: relative; padding: 20px 40px 20px 60px; background-color: #EDE1C2; z-index: 5; } #footer { position: relative; width: 100%; height:42px; clear: both; background-repeat: repeat-y; background-image: url(images/indexBar.gif); } Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.