Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    cross broswer div width help

    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; /*centers this master-parent div*/
        background-color: blue;
    }
    #header {
        height: 60px;
        width: 100%;
        /*width: inherit;*/
        z-index: 2;
        background-color: fuchsia;
    }
    #footer {
        height: 25px;
        /*width: 100%;*/
        width: inherit;*/
        position: absolute;
        bottom: 0px;
        z-index: 2;
        background-color: green;
    }
    Here's my HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <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="footer">footer</div>
    </div>
    </body>
    </html>
    If the code is as it is in the example above the Firefox result is the footer div appears just below the header div and only extends part of the way across the parent div. I suspect it's only going 90% as the parent div is set to 90%.

    In IE the footer div appears at the bottom of the page like I want, but it only extends to the length of the content within the div.

    So, how do I get both browsers to display the footer div at the bottom of the page and extend all the way across to the edge of the parent div "wrap"?

    I've built a site using div and CSS and I love the ease, BUT I did absolute sizes, not dynamically sized divs.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    For starts you need to be using a complete doctype. The one in the example below is complete. Second you need to set an explicit width on anything that is position:absolute;, if you use width inherit it gets the width of the parent, in this case that width is 90%. Try the below. I added content so you could see the footer at the bottom at all times. Remove the content, the footer remains at the bottom. You'll need some hacks for IE6 but those are simple enough.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title><?php echo $page_title; ?></title>
    <style type="text/css">
    html, body {
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    background-color: #C0C0C0;
    margin: 0;
    padding:0;
    }
    #wrap {
    min-height: 100%;
    width: 90%;
    margin: 0 auto; /*centers this master-parent div*/
    background-color: blue;
    position:relative;
    }
    #header {
    height: 60px;
    width: 100%;
    background-color: fuchsia;
    }
    #footer {
    height: 25px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left:0;
    z-index: 1;
    background-color: green;
    }
    #content {
    padding-bottom:25px;
    }
    #content p {
    margin:0;
    padding:10px;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
    	<div id="header">header</div>
    	<div id="content">
    		<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eros ligula, pharetra eget, aliquet sed, luctus lacinia, sapien? Integer porttitor adipiscing odio. Suspendisse aliquam sapien? Vivamus volutpat metus sit amet tortor? Donec elit nisi, imperdiet id, pulvinar vitae, porttitor nec, elit. Cras pellentesque vehicula ipsum. Nunc vitae velit pharetra est facilisis faucibus. Aliquam erat volutpat. Aenean at lacus. Nulla porta, massa id elementum convallis, velit justo condimentum felis, id feugiat massa ipsum ullamcorper tortor. Nunc vehicula, ligula id cursus dapibus, nisl diam ullamcorper enim, a tincidunt odio quam ut tortor. Nunc elit sem, laoreet in, semper ut, eleifend id, risus. Suspendisse diam. Proin tempor ligula vel enim! Nam dictum adipiscing lacus. Pellentesque egestas velit eget lectus commodo eleifend. </p>
    		<p> Integer rutrum scelerisque justo. Nunc at magna. Nulla facilisis. Fusce tristique, est ac sollicitudin hendrerit, augue lacus ultricies risus, placerat posuere ipsum erat id ligula! Aenean turpis? Fusce sagittis varius purus. Vestibulum suscipit. Aenean sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla consectetuer urna quis orci. Praesent vel elit. In sit amet nulla non felis aliquet volutpat. Phasellus ut pede. Nam in ante. Vivamus scelerisque egestas nisi. Sed justo purus, venenatis sit amet, luctus vitae, suscipit ut, orci. Duis et urna ut sem dignissim pellentesque. Quisque mollis. Morbi dapibus magna quis odio. </p>
    		<p> Nullam at massa. Nunc purus turpis, ultrices id, vehicula aliquet, laoreet quis, ipsum. Fusce sollicitudin, nisi non vestibulum varius, lorem nisi laoreet ante, sed gravida mi enim id sem. Donec adipiscing interdum enim. Etiam ornare pede eget tortor. Vestibulum suscipit. In volutpat placerat nulla. Aenean quis purus. Praesent metus elit, vulputate quis, faucibus vel, adipiscing eget, orci. Proin porttitor dui in nisi. Aliquam lobortis, nisl lobortis placerat pretium, elit mi dignissim risus; eget sodales orci ante sit amet mauris. Phasellus ac massa id justo rhoncus venenatis. Sed pretium ultrices leo. </p>
    		<p> Proin neque? Ut consequat. Integer aliquam, odio non pretium facilisis, risus nisl accumsan pede, ac vulputate magna risus in felis. Praesent pede? Donec varius ipsum ac nisi. Aenean lacinia vehicula diam. Suspendisse at erat. Nullam lacus. Integer lacinia eleifend neque. Nullam quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
    		<p> Maecenas scelerisque semper tortor. Praesent dictum sodales orci. Duis nec massa id velit rhoncus bibendum. Nulla facilisi. Praesent pharetra purus rhoncus sapien. Nulla faucibus fermentum sem. Donec at nulla ac nisl dapibus aliquam. Nulla fringilla, libero vitae fringilla condimentum, turpis enim scelerisque lectus, at dictum ante enim vehicula nulla? Aliquam erat volutpat. Integer lorem. Maecenas quis erat. Nam erat. Maecenas in eros non mi elementum aliquet. Nam elementum congue turpis. </p>
    		<p> Etiam augue ante, consectetuer a, venenatis eget, aliquam vehicula; nulla. Ut molestie justo sed nisi. Suspendisse massa. Maecenas auctor lobortis lorem. Cras gravida lacus vitae orci? Sed porta laoreet tortor? Sed sed pede. Phasellus lobortis sollicitudin nisl? Phasellus lobortis, felis nec cursus fermentum, mauris ante pellentesque est, sit amet dignissim nisi mauris a tellus? Etiam lectus. Donec ultricies tellus id lorem. Phasellus sodales velit mollis sem. Morbi hendrerit lobortis nunc. Aliquam tincidunt ligula at justo. Nunc faucibus congue mauris! Curabitur tempor, ligula a consequat egestas, justo lectus accumsan risus, a lacinia quam nisi at est. Donec vel dui at tortor cursus euismod. Sed molestie, risus eget posuere tempus, justo quam elementum diam, eget eleifend lectus purus consectetuer velit. Vivamus eleifend fermentum lorem! Ut quam lorem, sodales non, interdum et, venenatis quis; ligula. </p>
    		<p> Pellentesque nec nisl a eros dignissim egestas. Curabitur tellus ante, egestas nec, tincidunt id, porttitor eu, erat. Sed viverra suscipit nisl. Proin porta posuere sem. Ut rutrum, metus in volutpat elementum, l </p>
    		<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eros ligula, pharetra eget, aliquet sed, luctus lacinia, sapien? Integer porttitor adipiscing odio. Suspendisse aliquam sapien? Vivamus volutpat metus sit amet tortor? Donec elit nisi, imperdiet id, pulvinar vitae, porttitor nec, elit. Cras pellentesque vehicula ipsum. Nunc vitae velit pharetra est facilisis faucibus. Aliquam erat volutpat. Aenean at lacus. Nulla porta, massa id elementum convallis, velit justo condimentum felis, id feugiat massa ipsum ullamcorper tortor. Nunc vehicula, ligula id cursus dapibus, nisl diam ullamcorper enim, a tincidunt odio quam ut tortor. Nunc elit sem, laoreet in, semper ut, eleifend id, risus. Suspendisse diam. Proin tempor ligula vel enim! Nam dictum adipiscing lacus. Pellentesque egestas velit eget lectus commodo eleifend. </p>
    		<p> Integer rutrum scelerisque justo. Nunc at magna. Nulla facilisis. Fusce tristique, est ac sollicitudin hendrerit, augue lacus ultricies risus, placerat posuere ipsum erat id ligula! Aenean turpis? Fusce sagittis varius purus. Vestibulum suscipit. Aenean sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla consectetuer urna quis orci. Praesent vel elit. In sit amet nulla non felis aliquet volutpat. Phasellus ut pede. Nam in ante. Vivamus scelerisque egestas nisi. Sed justo purus, venenatis sit amet, luctus vitae, suscipit ut, orci. Duis et urna ut sem dignissim pellentesque. Quisque mollis. Morbi dapibus magna quis odio. </p>
    		<p> Nullam at massa. Nunc purus turpis, ultrices id, vehicula aliquet, laoreet quis, ipsum. Fusce sollicitudin, nisi non vestibulum varius, lorem nisi laoreet ante, sed gravida mi enim id sem. Donec adipiscing interdum enim. Etiam ornare pede eget tortor. Vestibulum suscipit. In volutpat placerat nulla. Aenean quis purus. Praesent metus elit, vulputate quis, faucibus vel, adipiscing eget, orci. Proin porttitor dui in nisi. Aliquam lobortis, nisl lobortis placerat pretium, elit mi dignissim risus; eget sodales orci ante sit amet mauris. Phasellus ac massa id justo rhoncus venenatis. Sed pretium ultrices leo. </p>
    		<p> Proin neque? Ut consequat. Integer aliquam, odio non pretium facilisis, risus nisl accumsan pede, ac vulputate magna risus in felis. Praesent pede? Donec varius ipsum ac nisi. Aenean lacinia vehicula diam. Suspendisse at erat. Nullam lacus. Integer lacinia eleifend neque. Nullam quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
    		<p> Maecenas scelerisque semper tortor. Praesent dictum sodales orci. Duis nec massa id velit rhoncus bibendum. Nulla facilisi. Praesent pharetra purus rhoncus sapien. Nulla faucibus fermentum sem. Donec at nulla ac nisl dapibus aliquam. Nulla fringilla, libero vitae fringilla condimentum, turpis enim scelerisque lectus, at dictum ante enim vehicula nulla? Aliquam erat volutpat. Integer lorem. Maecenas quis erat. Nam erat. Maecenas in eros non mi elementum aliquet. Nam elementum congue turpis. </p>
    		<p> Etiam augue ante, consectetuer a, venenatis eget, aliquam vehicula; nulla. Ut molestie justo sed nisi. Suspendisse massa. Maecenas auctor lobortis lorem. Cras gravida lacus vitae orci? Sed porta laoreet tortor? Sed sed pede. Phasellus lobortis sollicitudin nisl? Phasellus lobortis, felis nec cursus fermentum, mauris ante pellentesque est, sit amet dignissim nisi mauris a tellus? Etiam lectus. Donec ultricies tellus id lorem. Phasellus sodales velit mollis sem. Morbi hendrerit lobortis nunc. Aliquam tincidunt ligula at justo. Nunc faucibus congue mauris! Curabitur tempor, ligula a consequat egestas, justo lectus accumsan risus, a lacinia quam nisi at est. Donec vel dui at tortor cursus euismod. Sed molestie, risus eget posuere tempus, justo quam elementum diam, eget eleifend lectus purus consectetuer velit. Vivamus eleifend fermentum lorem! Ut quam lorem, sodales non, interdum et, venenatis quis; ligula. </p>
    		<p> Pellentesque nec nisl a eros dignissim egestas. Curabitur tellus ante, egestas nec, tincidunt id, porttitor eu, erat. Sed viverra suscipit nisl. Proin porta posuere sem. Ut rutrum, metus in volutpat elementum, l </p>
    	</div>
    	<div id="footer">footer</div>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by _Aerospace_Eng_ View Post
    For starts you need to be using a complete doctype. The one in the example below is complete. Second you need to set an explicit width on anything that is position:absolute;, if you use width inherit it gets the width of the parent, in this case that width is 90%.
    If width is not set, is "width: inherit;" then not implied or is it "width: 100%;" (which is the same as "width: auto;") ?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    No its not width:100%;. If its inherit it takes on the width of its parent element which is the #container so the width would be 90% not 100%.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    oesxyl (11-22-2008)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •