Jump to content

correct positioning for relative divs


owosso

Recommended Posts

body {	margin: 0px;	padding: 0px 0px 30px;	background-color: #FFFFFF;	font-size: 62.5% /* 16px × 62.5% = 10px */;	}p	{	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 1.2em;	color: #6F6659;	line-height: 1.4em;	}	a	{	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 1.2em;	color: #6F6659;	text-decoration: none;	}	a:hover {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 1.2em;	color: #FF9933;	text-decoration: none;	}			h1	{	font-family: Verdana, Arial, Helvetica, sans-serif;	color:#FF9933;	line-height: 0em;	font-size: 3em;	font-weight: lighter;	}	h2	{	font-family: Arial, Helvetica, sans-serif;	color:#FF9933;	font-size: 1.9em;	font-weight: lighter;	}	h3	{	font-family: Arial, Helvetica, sans-serif;	color:#FF9933;	font-size: 9px;	}#flash {	height: 160px;	width: 760px;	z-index: 1;	margin-right: auto;	margin-left: auto;	top: 36px;	padding-top: 36px;}#lineTop {	height: 20px;	width: 100%;	top: 175px;	border-top-width: 2px;	border-top-style: solid;	border-top-color: #FF9933;	right: 0px;	z-index: 1;	position: absolute;	}#communication {	width: 75%;	height: auto;	z-index: 3;	position: relative;	padding-bottom: 10px;	float: right;}#content {	width: 67%;	height: auto;	z-index: 3;	padding-right: 64px;	position: relative;	padding-bottom: 10px;	float: right;}#image {	width: 760px;	height: 316px;	z-index: 1;	position: absolute;	top: 0px;}#nav a:link, a:visited {	font-size: 1.3em;	color: #FF9933;	letter-spacing: -0.6px;	}	#nav a:hover, a:active {	font-size: 1.3em;	letter-spacing: -0.6px;	color: #6F6659;	}#nav a:hover {	background-color:#FFD2A5;	}		ul#nav {	width: 85px;	position: absolute;	z-index: 3;	left: 28px;	top: 0px;	background-color: #FFFFFF;}		ul#nav li {	border-bottom: solid 1px #6F6659;	text-align: right;	text-decoration: none;	list-style: none;}ul#nav li a {	border-bottom: 1px solid #3399FF;	text-decoration: none;	display: block;}ul#nav li#youarehere nav a { 	background-color: DDDDc2;	text-decoration: none;	}	#horizontal {	height: auto;	width: 760px;	margin-right: auto;	margin-left: auto;	position: relative;	top: 10px;	margin-bottom: 0px;}#lineBottom {	border-top-width: 4px;	border-top-style: solid;	border-top-color: #FF9933;	right: 0px;	z-index: 1;	height: 100%;	width: 100%;	position: relative;	top: 10px;}#copyright {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 9px;	color: #6F6659F;	width: 760px;	position: relative;	margin-right: auto;	margin-left: auto;	text-align: center;	top: 10px;}

For centering and layering purposes, I have three divs inside a container div called #horizontal. I'd like two more divs, #bottomLine and #copyright, to position beneath them. When the viewer needs to increase the text size (ctrl+), I'd like the divs to flow downward together, with #bottomLine and #copyright continuing to position beneath the #horizontal.Two problems:I can't get #horizontal to include the length of all three divs its supposed to contain. And I can't seem to get #bottomLine and #copyright to position beneath #horizontal. The bottom orange line is supposed to be beneath the menu and the content.What am I doing wrong?http://www.adunate.com/index.new.III.htmlSorry for the jump to my homepage. I can't get rid of it. I'll take answers for that too:-)

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...