Jump to content

Help with div positioning


Darkmatter5

Recommended Posts

Here's my css code

html, body {
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    background-color: #C0C0C0;
    margin: 0 auto;
}
#wrap {
    min-height: 100%;
    width: 90%;
    z-index: 1;
    margin: 0 auto;*/
    position: relative;
    background-color: blue;*/
}
#header {
    height: 60px;
    z-index: 2;
    background-color: fuchsia;*/
}
#content {
    z-index: 2;
    background-color: aqua;*/
}
#footer {
    height: 60px;
    width: inherit;
    z-index: 2;
    position: absolute;
    bottom: 0px;
    background-color: green;*/
}

 

Here's my page code

<!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><?php echo $page_title; ?></title>
<link href="library/config.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap">
  <div id="header">header</div>
  <div id="content">content</div>
  <div id="footer">footer</div>
</div>
</body>
</html>

 

The page displays fine in Firefox, but in IE the footer div only extends the length of the content, not all the way across.  Why not?

Link to comment
https://forums.phpfreaks.com/topic/133409-help-with-div-positioning/
Share on other sites

Okay I put "width: 100%;" on header, content and footer.  In IE it worked, but in Firefox it extents the width of the window, not the edge of the parent div.  How can I fix this?

 

Upon further examination, it looks like Firefox likes inherit when IE likes 100%, how can you do both or a happy medium both like?

How can you put 2 divs inside a wrapper div and give the right div a fixed width, but then give the left div a width of "fill up to the edge of the right div".  So The div div is fixed in width, but the left is dynamic.  How in Hades can you do this?

Archived

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

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.