• 0

Footer After Absolutely-Positioned Div's


Question

Hi all,

So here's my problem: I have a wrapper div that's relatively positioned. Inside of this wrapper div I have two absolutely positioned divs: a nav bar and a content area. Both of these div's have fixed widths, but not a fixed height. After this wrapper div, I'm trying to put a normal div: the footer. Problem is, when I do this, the footer gets put where the wrapper starts, under the absolute divs.

Thanks in advance

EDIT: here's a simple code to demonstrate what I'm talking about:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div style="position:relative; width:800px; background:red;">
	<div style="position:absolute; width:200px; top:0; left:0; background:blue;">text here</div>
    <div style="position:absolute; width:600px; top:0; right:0; background:green;">and text here!</div>
</div>
<div style="width:800px;">
why isn't this working?
</div>
</body>
</html>

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

http://icupcake.org/dev/neowin/barvian.html

All fixed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div style="position:relative; width:800px; background:red;">
        <div style="float: left; width:200px; background:blue;">text here</div>
    <div style="float: right; width:600px; background:green;">and text here!</div>
</div>
<div style="width:800px; clear: both;">
why isn't this working?
</div>
</body>
</html>

Link to comment
Share on other sites

  • 0

by the way, I know that absolute positioning is a pain, but I'm only using them for the z-index. If there's a workaround you can find, please let me know.

here's a screenshot illustrating why:

555652755.png

Link to comment
Share on other sites

  • 0

Nothing in that screenshot needs to actually use z-index when coded.

For the links sidebar and the content, you can float those.. And just change the content's margin-left to -##px so that it's below the sidebar and then increase padding-left #px so that you add that gap to compensate for the sidebar.

As far as the image goes, are they going to remain the same or change?

Link to comment
Share on other sites

  • 0

Take what Cupcake made... then add position: relative to both of them (this won't move them in anyway), then you can use z-index!!

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div style="position:relative; width:800px; background:red;">
        <div style="float: left; width:200px; background:blue; position: relative; z-index: 99">text here</div>
    <div style="float: right; width:600px; background:green; position: relative; z-index: 99">and text here!</div>
</div>
<div style="width:800px; clear: both;">
why isn't this working?
</div>
</body>
</html>

Edited by Stephen
fixed code tags
Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.