Jump to content

Unwanted extra spacing below div


owosso

Recommended Posts

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...