Jump to content

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?

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.