Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Trouble with CSS position:absolute and bottom value

Posted on 2009-02-10
5
Medium Priority
?
598 Views
Last Modified: 2012-05-06
I am struggling with a layout. I am using css positioning selectors.
When I put a footer in, it seems to be inheriting from a div it is not a child of.
Here is my css stylesheet:
/* universal */
* {
	margin: 0;
	padding: 0;
}
 
/* Body styles */
body {
	position: relative; margin: 0; padding: 0;
	background: #fdfdfa url(images/bigtree.jpg) 0 0 no-repeat fixed;
	z-index: 1;
}
 
 
/* Container for Logo and Ad */
div#header {
	background-color: #fdfdfa;
	margin: 0 5em 0 5em;
	padding: 0px;
	border: none;
	width: 100%;
	height: 80px;
	position:fixed;
	z-index:5;
	min-width: 900px;
}
 
#header #nwlogo {
	margin: 0px;
	height:60px;
	padding: 0px;
	border: 0;
	float: left;
	z-index:7;
	position:absolute;
	top:0;
	left:0;
}
#header #adspace {
	margin: 0;
	height:60px;
	padding: 0.5em;
	float: right;
	border: 0;
	z-index:6;
	position:static;
}
 
#explainer {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000000;
	padding: 0px;
	margin-top: 0px;
	margin-right: 5em;
	margin-bottom: 0px;
	margin-left: 5em;
	position:absolute;
	top:80px;
	left:0px;
	text-align: left;
	width: 100%;
	z-index: 2;
	min-width:900px;
	background-color: #fdfdfa;
	background-image: url(Images/biggrad.jpg);
	background-repeat: no-repeat;
}
 
div#content {
	position:absolute;
	margin: 0 5em 2em 5em;
	padding: 0 10px 10px 10px;
	color: black;
	font-family: Arial, sans-serif;
	border: 4px solid #6192cd;
	top: 110px;
	left: 2px;
	z-index: 3;
	min-width:800px;
}
 
#icons {
	height: 50px;
	width: 100%;
	margin: 0;
	padding:0;
}
 
#icons #getit {
	height: auto;
	width: 29%;
	float: left;
	vertical-align:text-bottom;
	text-align: left;
	display: inline;
	padding: 0;
	margin-left: 4em;
}
 
#content #icons #seeit {
	float: right;
	width: 33%;
	border: none;
	height: 50px;
	vertical-align:text-bottom;
	text-align: center;
	padding: 0;
}
 
#content #icons #readit {
	height: auto;
	width: 33%;
	vertical-align:text-bottom;
	text-align: center;
	margin-right: 33%;
	margin-left: 33%;
	padding: 0;
}
 
#content #columns {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	text-align: left;
	white-space: normal;
	margin: 0px;
	padding: 0px;
	width: 100%;
}
 
#content #columns #leftcolumn {
	font-size: 110%;
	font-weight: bold;
	margin: 0px;
	padding: 0 5px 0 0;
	width: 33%;
	float: left;
	display: inline;
}
 
#content #columns #leftcolumn p a:link {
	color: #a7090b;
}
#content #columns #leftcolumn p a:visited {
	color: #5C5C5C;
}
 
#content #columns #leftcolumn p a:hover {
	font-size: 115%;
	font-weight: bolder;
	color: #00C;
}
 
#content #columns #leftcolumn hr {
	background-color: #a7090b;
	margin: 1em 2em;
	padding: 0px;
	height: 3px;
	width: 75%;
	border: solid thin #a7090b;
	text-align: center;
}
 
#content #columns #rightcolumn {
	font-size: 100%;
	margin: 0px;
	padding: 0 0 0 5px;
	width: 30%;
	float: right;
	display: inline;
}
 
#content #columns #rightcolumn a:link {
	color: #3a5d52;
	font-weight: bold;
}
#content #columns #rightcolumn a:visited {
	color: #5C5C5C;
}
#content #columns #rightcolumn a:hover {
	font-size: 105%;
	color: #00C;
}
 
#content #columns #rightcolumn hr {
	background-color: #3a5d52;
	text-align: center;
	padding: 0px;
	width: 75%;
	margin-top: 1em;
	margin-right: 2em;
	margin-bottom: 1em;
	margin-left: 2em;
	border: thin solid #3a5d52;
	height: 3px;
}
 
#content #columns #centercolumn {
	font-size: 105%;
	padding: 0 5px;
	width: 33%;
	border-left: solid thin #6192cd;
	border-right: solid thin #6192cd;
	margin-left: 35%;
	height: 100%;
}
 
#content #columns #centercolumn a:link {
	color: #6192cd;
	font-weight: bold;
}
#content #columns #centercolumn a:visited {
	color: #5C5C5C;
}
 
#content #columns #centercolumn a:hover {
	color: #00C;
	font-size: 110%;
}
 
#content #columns #centercolumn hr {
	background-color: #6192cd;
	text-align: center;
	padding: 0px;
	height: 3px;
	width: 75%;
	margin-top: 1em;
	margin-right: 2em;
	margin-bottom: 1em;
	margin-left: 2em;
	border: thin solid #6192cd;
}
 
#footer {
	clear:inherit;
	width:100%;
	border:solid thick #000;
	position: absolute;
	bottom:1px;
	left: 3px;
	z-index: 9;
	height: 60px;
	margin-top: auto;
	margin-right: 5em;
	margin-left: 5em;
}
 
This is my document code:
<body>
 
<div id="header"><!-- This is the header container -->
	<div id="nwlogo"><img src="Images/nwnewsbanner.jpg"  border="0" /></div>
    <div id="adspace"><img src="Images/ad1.gif" border="0" /></div>
</div> <!-- This is the end of the header container -->
 
<div><!-- this div is somehow helping the following explainer div -->
</div>
<div id="explainer">
  <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;We sift out... </h4>
</div>
 
<div id="content"><!-- This is the main content container -->
<div id="icons"><!-- This is the container for the column icons -->
<!-- Get it now icon -->
<div id="getit"><img src="Images/getflare.jpg" alt="Get It" align="absbottom"  /></div><!-- end of Get it now -->
<!-- See it icon - needs to go before the center icon to get icons to line up right -->
<div id="seeit"><img src="Images/eye3.jpg" alt="See It" align="absbottom"  /></div><!-- end of See it icon -->
<!-- Read it icon -->
<div id="readit"><img src="Images/readitmon.jpg" alt="Read It" align="absbottom"  /></div><!-- end of Read it icon -->
</div><!-- end of icons container -->
 
<div id="columns"><!-- This is the container for the three columns -->
<!-- This is the left column -->
<div id="leftcolumn"><p>Oregon.. <a href="#">"We ...</a> ...Package</p>
<hr />
</div><!-- this is the end of the left column -->
<!-- This is the right column, it comes before the center one so things line up right -->
<div id="rightcolumn">
  <p>When... <a href="#">Company... </a>...Responsible</p>
<hr />
</div><!-- end of the right column -->
<!-- This is the center column -->
<div id="centercolumn"><p>University....  <a href="#1">600...</a> ...Likely</p>
<hr />
</div><!-- end of the center column -->
</div><!-- end of the columns container -->
</div><!-- end of the content container -->
<div id="footer"><p>This is the footer area.<br />Where is the footer.</p></div>
</body>

Open in new window

0
Comment
Question by:Roboalt
  • 3
  • 2
5 Comments
 
LVL 13

Assisted Solution

by:myderrick
myderrick earned 375 total points
ID: 23609183
You are using clear:inherit. That is why.

try clear: both


MD


#footer {
	clear:both;
	width:100%;
	border:solid thick #000;
	position: absolute;
	bottom:1px;
	left: 3px;
	z-index: 9;
	height: 60px;
	margin-top: auto;
	margin-right: 5em;
	margin-left: 5em;
}

Open in new window

0
 
LVL 13

Accepted Solution

by:
myderrick earned 375 total points
ID: 23609256
And take away all the position:absolute

They are causing trouble.  If you want to use position absolute then you have to keep in mind that absolute positioning will move the div outside the document flow. So you may need to specify margin-top to prevent stacking div on other divs.

Try replacing them with position: relative and you will notice the difference.

More on positioning here:
http://www.w3schools.com/Css/css_positioning.asp
http://www.brainjar.com/css/positioning/

MD
* {
	margin: 0;
	padding: 0;
}
 
/* Body styles */
body {
	position: relative; margin: 0; padding: 0;
	background: #fdfdfa url(images/bigtree.jpg) 0 0 no-repeat fixed;
	z-index: 1;
}
 
 
/* Container for Logo and Ad */
div#header {
	background-color: #fdfdfa;
	margin: 0 5em 0 5em;
	padding: 0px;
	border: none;
	width: 100%;
	height: 80px;
	position:fixed;
	z-index:5;
	min-width: 900px;
}
 
#header #nwlogo {
	margin: 0px;
	height:60px;
	padding: 0px;
	border: 0;
	float: left;
	z-index:7;
/*	position:absolute;*/
	top:0;
	left:0;
}
#header #adspace {
	margin: 0;
	height:60px;
	padding: 0.5em;
	float: right;
	border: 0;
	z-index:6;
	position:static;
}
 
#explainer {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000000;
	padding: 0px;
	margin-top: 0px;
	margin-right: 5em;
	margin-bottom: 0px;
	margin-left: 5em;
	/*position:absolute;*/
	top:80px;
	left:0px;
	text-align: left;
	width: 100%;
	z-index: 2;
	min-width:900px;
	background-color: #fdfdfa;
	background-image: url(Images/biggrad.jpg);
	background-repeat: no-repeat;
}
 
div#content {
	/*position:absolute;*/
	margin: 0 5em 2em 5em;
	padding: 0 10px 10px 10px;
	color: black;
	font-family: Arial, sans-serif;
	border: 4px solid #6192cd;
	top: 110px;
	left: 2px;
	z-index: 3;
	min-width:800px;
}
 
#icons {
	height: 50px;
	width: 100%;
	margin: 0;
	padding:0;
}
 
#icons #getit {
	height: auto;
	width: 29%;
	float: left;
	vertical-align:text-bottom;
	text-align: left;
	display: inline;
	padding: 0;
	margin-left: 4em;
}
 
#content #icons #seeit {
	float: right;
	width: 33%;
	border: none;
	height: 50px;
	vertical-align:text-bottom;
	text-align: center;
	padding: 0;
}
 
#content #icons #readit {
	height: auto;
	width: 33%;
	vertical-align:text-bottom;
	text-align: center;
	margin-right: 33%;
	margin-left: 33%;
	padding: 0;
}
 
#content #columns {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	text-align: left;
	white-space: normal;
	margin: 0px;
	padding: 0px;
	width: 100%;
}
 
#content #columns #leftcolumn {
	font-size: 110%;
	font-weight: bold;
	margin: 0px;
	padding: 0 5px 0 0;
	width: 33%;
	float: left;
	display: inline;
}
 
#content #columns #leftcolumn p a:link {
	color: #a7090b;
}
#content #columns #leftcolumn p a:visited {
	color: #5C5C5C;
}
 
#content #columns #leftcolumn p a:hover {
	font-size: 115%;
	font-weight: bolder;
	color: #00C;
}
 
#content #columns #leftcolumn hr {
	background-color: #a7090b;
	margin: 1em 2em;
	padding: 0px;
	height: 3px;
	width: 75%;
	border: solid thin #a7090b;
	text-align: center;
}
 
#content #columns #rightcolumn {
	font-size: 100%;
	margin: 0px;
	padding: 0 0 0 5px;
	width: 30%;
	float: right;
	display: inline;
}
 
#content #columns #rightcolumn a:link {
	color: #3a5d52;
	font-weight: bold;
}
#content #columns #rightcolumn a:visited {
	color: #5C5C5C;
}
#content #columns #rightcolumn a:hover {
	font-size: 105%;
	color: #00C;
}
 
#content #columns #rightcolumn hr {
	background-color: #3a5d52;
	text-align: center;
	padding: 0px;
	width: 75%;
	margin-top: 1em;
	margin-right: 2em;
	margin-bottom: 1em;
	margin-left: 2em;
	border: thin solid #3a5d52;
	height: 3px;
}
 
#content #columns #centercolumn {
	font-size: 105%;
	padding: 0 5px;
	width: 33%;
	border-left: solid thin #6192cd;
	border-right: solid thin #6192cd;
	margin-left: 35%;
	height: 100%;
}
 
#content #columns #centercolumn a:link {
	color: #6192cd;
	font-weight: bold;
}
#content #columns #centercolumn a:visited {
	color: #5C5C5C;
}
 
#content #columns #centercolumn a:hover {
	color: #00C;
	font-size: 110%;
}
 
#content #columns #centercolumn hr {
	background-color: #6192cd;
	text-align: center;
	padding: 0px;
	height: 3px;
	width: 75%;
	margin-top: 1em;
	margin-right: 2em;
	margin-bottom: 1em;
	margin-left: 2em;
	border: thin solid #6192cd;
}
 
#footer {
	clear: both;
	width:100%;
	border:solid thick #000;
/*	position: absolute;*/
	bottom:1px;
	left: 3px;
	z-index: 9;
	height: 60px;
	
	margin-right: 5em;
	margin-left: 5em;
}

Open in new window

0
 

Author Comment

by:Roboalt
ID: 23615149
I made both of the changes you suggested:
clear:both
changing all position:absolute to position:relative

The footer now just covers the very bottom of my content area. Does position:relative also move divs outside of the document flow?

With the margin-top, I am concerned structuring it according to the very top of the document because my content area will shrink and expand height-wise as content is changed daily.

Thoughts?

0
 

Author Comment

by:Roboalt
ID: 23615365
Also, does "clear:both" work when you have three columns above the footer which you are trying to clear from?
0
 
LVL 13

Expert Comment

by:myderrick
ID: 23620166
Relative position mean the div is relative to the parent div.

Yes. Clear:both works that way....everywhere you  put it

MD
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
The viewer will learn how to count occurrences of each item in an array.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

579 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question