SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    800x600 screen resolution breaks my footer

    http://www.deronsizemore.com/test

    When you either resize the browser using FireFox's web developer tool bar or you set the resolution to 800x600, the footer no longer sets at the bottom of the content, but it jumps up into the content.

    I followed Paul's example in the FAQ to begin with. My HTML and CSS validates, so I'm out of ideas.

    Anyone know what's up?
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm confused.

    You set the width at 1000 px (min-width of 1000 px) and you're wondering why it fails on 800x600.......???????

    EDIT: Oh I see the footer problem as well. I'm not 100% sure, but pretty sure it's because you're positioning it absolutely, and that causes it to act differently as opposed to leaving it as is with a clear :both;
    Cross browser css bugs

    Dan Schulz you will be missed

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    I'm confused.

    You set the width at 1000 px (min-width of 1000 px) and you're wondering why it fails on 800x600.......???????
    Yes, the min-width attribute that I have set 'should' only be for Netscape 6 users (according to Andy Budd). When you use the margin: 0 auto; method of centering a layout and "the width of the browser window is reduced below the width of the wrapper, the left side of the wrapper spills off the side of the page and cannot be accessed. To keep this from happening you need to give the body element a minimum width equal to or slightly wider than the width of the wrapper element." Now, If the browser window is resized below the width of the wrapper div, scroll bars will appear.

    Quote Originally Posted by SoulScratch View Post
    EDIT: Oh I see the footer problem as well. I'm not 100% sure, but pretty sure it's because you're positioning it absolutely, and that causes it to act differently as opposed to leaving it as is with a clear :both;
    I'm not sure...but I followed Paul's example in the FAQ and as far as I know did everything the way he said to (could be missing a small step?). Here is the link http://www.sitepoint.com/forums/show...66&postcount=3 if you scroll down a bit you can see the part for "footer at the bottom of centered layout"
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  4. #4
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds View Post
    Hello

    Because you mix floats and not floating containers and don't clear the float properly, a lot of bad forces are working on your layout

    The content box is also redundant, the way you use a background image on the wrapper to get the 3 columns
    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>
    <title> New Document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="Keywords" content="xx" />
    <meta name="Description" content="xxx" />
    <meta name="robots" content="all" />
    <meta http-equiv="imagetoolbar" content="false" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="Author" content="Deron Sizemore" />
    <meta name="copyright" content="xxxx" />
    
    <style type="text/css">
    /*-------------------------------------------------
    Style Sheet for KentuckyGolfing
    
    Version:	1.0
    Author:		Deron Sizemore
    Website:	http://www.deronsizemore.com
    -------------------------------------------------*/
    
    /* commented backslash hack \*/ 
    html, body{height:100%;} 
    /* end hack */
    
    body {
    	background: #898989 url(images/body_bg.gif) repeat-x;
    	font-family: Verdana, Helvetica, Arial,sans-serif;
    	font-size: 62.5%;
    	text-align: center;
    	min-width:1000px;
    	color: #666;
    }
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    	head+/**/body .fc:after{ /* min-height browser but not IE 7 */
    	content:".";
    	display:block;
    	height:0px;
    	clear:both;
    	visibility:hidden;
    	}
    
    #wrapper {
    	min-height:100%;
    	background:#ffffff url(images/wrapper_bg.gif) repeat-y;
    	width:1000px;
    	margin: -50px auto 0 auto;
    	text-align: left;
    	position: relative;
    }
    * html #wrapper {height: 100%;} /* ie6 and under*/
    
    #mastHead{
    	background: #fff;
    	height: 100px;
    border-top:50px solid #000000;
    }
    
    
    #mainNav {
    	list-style: none;
    	background: #454545;
    }
    ul#mainNav li {
    	float: left;
    }
    #mainNav a {
    	font-size: 1.3em;
    	display: block;
    	padding: 0 1.3em;
    	line-height: 2.1em;
    	text-decoration: none;
    	color: #fff;
    }
    #mainNav a:hover {
    	background: #898989;
    }
    
    #home #mainNav .home a {
    	background: #898989;
    }
    
    #mainContent {
    	width:490px;
    	float:left;
    	font-size:1.4em;
    }
    
    #secondaryContent {
    	width:270px;
    	float:left;
    	font-size:1.2em;
    }
    
    #sideBar {
    	width:240px;
    	float:right;
    }
    
    #footer {
    	margin:0 auto;
    	width:1000px;
    	background: #454545;
    	height:50px;
    }
    #mainContent p,#secondaryContent p,#sideBar p{ padding:10px;}
    
    </style>
    <!--[if IE]>
    <style type="text/css">
    * html .fc{height:1%;} /* IE 5 5.5 6 haslayout */
    *:first-child+html .fc{zoom:1;} /* IE 7 haslayout */
    </style>
    <![endif]-->
    </head>
    <body id="home">
    
    <div id="wrapper" class="fc">
    
    <div id="mastHead">MASTHEAD</div>
    
    <ul id="mainNav" class="fc">
    <li class="home"><a href="##">HOME</a></li>
    <li><a href="##">ABOUT</a></li>
    <li><a href="##">NEWS</a></li>
    <li><a href="##">PRODUCTS</a></li>
    <li><a href="##">SERVICES</a></li>
    <li><a href="##">CLIENTS</a></li>
    <li><a href="##">CONTACT US</a></li>
    </ul>
    
    <div id="mainContent">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pellentesque sollicitudin urna. Etiam pellentesque tortor. Curabitur vel turpis. Ut ultricies molestie nulla. Proin suscipit euismod lacus. Quisque sagittis ornare lectus. Maecenas sed tellus eu leo ornare varius. Aliquam bibendum viverra arcu. Sed sed velit. Aliquam lacinia odio. Ut eleifend pellentesque mi. Vestibulum venenatis est nec justo lacinia semper. Vestibulum a massa in orci dignissim iaculis. Sed porttitor. Donec vestibulum tortor a turpis.
    
    Suspendisse cursus auctor lacus. Suspendisse potenti. In ut nulla. Donec eget mi id nisl euismod placerat. Maecenas condimentum massa quis ligula. Quisque ut mauris in felis venenatis vestibulum. Nullam id magna. Nam non eros eu arcu laoreet vehicula. Ut fermentum rutrum elit. Vivamus feugiat est nec urna. Donec vitae enim. Maecenas lectus ligula, pharetra posuere, volutpat quis, hendrerit sed, felis. Duis arcu. Pellentesque laoreet risus vitae tortor. Nunc ut leo sit amet justo ornare posuere. Nam urna ante, lacinia ac, euismod a, mattis non, tellus. </p>
    </div>
    
    <div id="secondaryContent">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pellentesque sollicitudin urna. Etiam pellentesque tortor. Curabitur vel turpis. Ut ultricies molestie nulla. Proin suscipit euismod lacus. Quisque sagittis ornare lectus. Maecenas sed tellus eu leo ornare varius. Aliquam bibendum viverra arcu. Sed sed velit. Aliquam lacinia odio. Ut eleifend pellentesque mi. Vestibulum venenatis est nec justo lacinia semper. Vestibulum a massa in orci dignissim iaculis. Sed porttitor. Donec vestibulum tortor a turpis.
    
    	Suspendisse cursus auctor lacus. Suspendisse potenti. In ut nulla. Donec eget mi id nisl euismod placerat. Maecenas condimentum massa quis ligula. Quisque ut mauris in felis venenatis vestibulum. Nullam id magna. Nam non eros eu arcu laoreet vehicula. Ut fermentum rutrum elit. Vivamus feugiat est nec urna. Donec vitae enim. Maecenas lectus ligula, pharetra posuere, volutpat quis, hendrerit sed, felis. Duis arcu. Pellentesque laoreet risus vitae tortor. Nunc ut leo sit amet justo ornare posuere. Nam urna ante, lacinia ac, euismod a, mattis non, tellus.</p> 
    </div>
    
    <div id="sideBar">
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pellentesque sollicitudin urna. Etiam pellentesque tortor. Curabitur vel turpis. Ut ultricies molestie nulla. Proin suscipit euismod lacus. Quisque sagittis ornare lectus. Maecenas sed tellus eu leo ornare varius. Aliquam bibendum viverra arcu. Sed sed velit. Aliquam lacinia odio. Ut eleifend pellentesque mi. Vestibulum venenatis est nec justo lacinia semper. Vestibulum a massa in orci dignissim iaculis. Sed porttitor. Donec vestibulum tortor a turpis.
    
    	Suspendisse cursus auctor lacus. Suspendisse potenti. In ut nulla. Donec eget mi id nisl euismod placerat. Maecenas condimentum massa quis ligula. Quisque ut mauris in felis venenatis vestibulum. Nullam id magna. Nam non eros eu arcu laoreet vehicula. Ut fermentum rutrum elit. Vivamus feugiat est nec urna. Donec vitae enim. Maecenas lectus ligula, pharetra posuere, volutpat quis, hendrerit sed, felis. Duis arcu. Pellentesque laoreet risus vitae tortor. Nunc ut leo sit amet justo ornare posuere. Nam urna ante, lacinia ac, euismod a, mattis non, tellus. </p>
    </div>
    
    </div>
    
    <div id="footer">FOOTER</div>
    
    </body>
    </html>
    Hi,

    Thanks for your thoughts. I was following CSS Mastery by Andy Budd for the layout and didn't think twice about the way everything was floated and having the extra "content" div in there. The way he was showing was without the use of a background image. So...I got that taken care of.

    Now, when I tried your layout, it works but I'm not real sure of a couple things that's happening. Can you explain? For example, the way I cleared the footer, I was following Paul's example in the FAQ, so I doubted that it would be wrong. Can you explain why it's wrong? Is it simply out dated or something?

    Also can you explain your method of clearing the footer? I don't see a clearing div or a "clear:both" in there anywhere, so I'm confused on how it's cleared?

    Also I noticed some extra code in there, as follows:

    Code:
    	head+/**/body .fc:after{ /* min-height browser but not IE 7 */
    	content:".";
    	display:block;
    	height:0px;
    	clear:both;
    	visibility:hidden;
    	}
    
    and....
    
    <!--[if IE]>
    <style type="text/css">
    * html .fc{height:1%;} /* IE 5 5.5 6 haslayout */
    *:first-child+html .fc{zoom:1;} /* IE 7 haslayout */
    </style>
    <![endif]-->
    The first snippet doesn't have an opening "{" and I also had no idea what the code does, nor do I know what the IE conditional means? I see it's for IE's haslayout, but the code doesn't make sense.

    Thank you for the help.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Deron,

    Now, when I tried your layout, it works but I'm not real sure of a couple things that's happening. Can you explain? For example, the way I cleared the footer, I was following Paul's example in the FAQ, so I doubted that it would be wrong. Can you explain why it's wrong? Is it simply out dated or something?
    No you just did it wrong

    Can you spot the error here:

    #clearfooter{clear:both;height:50px;}

    <div id="clearFooter"></div>

    You have used a capital F in the html and as classes are case sensitive then your clearFooter does nothing. Change it to match the css and it will work.

    There is a problem with IE with absolute positioning on the footer in a dynamic environment. You need to use a different footer technique if you are going to dynamically change or add elements.

    Use this method instead.

    Code:
    #wrapper{margin-bottom:0}
    #footer {
        margin: 0 auto;
        width: 1000px;
        clear: both;
        background: #454545;
        height: 50px;
        margin-top:-50px;
        position:relative;
    }
    #mainContent p,#secondaryContent p,#sideBar p {padding:10px;}
    
    #clearFooter{clear:both;height:50px;}
    Then move the footer outside of the main wrapper like so:
    Code:
                ac, euismod a, mattis non, tellus. </p>
        </div>
        <div id="clearFooter"></div>
    </div>
    <div id="footer"> FOOTER </div>
    </body>
    </html>
    If you do not have anything dynamic going n then the absolute version of the footer will be fine.

    The first snippet doesn't have an opening "{" and I also had no idea what the code does, nor do I know what the IE conditional means? I see it's for IE's haslayout, but the code doesn't make sense.
    The first snippet does have an opening bracket just after the :after {

    The IE conditional just forces layout in ie6- and ie7. zoom:1 applies layout to the element but doesn't change it any other way. height:1&#37; does the same for ie6- but is hidden from ie7 via the * html.

    Also can you explain your method of clearing the footer? I don't see a clearing div or a "clear:both" in there anywhere, so I'm confused on how it's cleared?
    It uses the :after pseudo class to place content and then clear it plus the layout hacks above for IE to do the clearing without structural mark up.

    See the section on floats for similar methods and explanations.

    Originally from here:
    http://www.positioniseverything.net/easyclearing.html

  6. #6
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, thanks for pointing out my overlooking the capital "F" in clearFooter. This is the first time I've used names with the first letter of the second word capitalized (after reading about naming in a current book I'm reading), so no surprise to me that I did that.

    I went with the second method you gave me for clearing the footer since I more than likely will have dynamic content in there.

    Is one method of clearing the footer better than the other? I see in the PIE link that the :after pseudo class method is the "new" method. Should I be using it or is it just two different tools to get the same effect?

    Also, should I be using the IE conditional code that all4nerds outlined? Or did I only need to use that in conjunction with the other steps he supplied?

    Thank you
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Should I be using it or is it just two different tools to get the same effect?
    The PIE method means that you don't have to add structural mark up to clear elements and its purely a personal decision depending on who how you like your code to look.

    Ben uses the conditional comments to keep any hacks out of the main stylesheet which is usually a good idea.

    I use this method below because it works from ie5 mac upwards and I just paste it in the markup and forget about it.

    Code:
    .clearfix:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .clearfix {
        display:inline-block;
    }
    
     /* mac hide \*/
        * html .clearfix {height: 1&#37;;}
          .clearfix {display: block;}
     /* End hide */
    Then went you want to make sure a parent clears its floats you just add the class to the element.

    Code:
    <div id="wrapper" class="clearfix">
    floats are here etc.....
    If you wanted to add it to a parent that already has a class then you would add it like this:

    Code:
    <div class="wrapper clearfix">
    Its basically the same as Bens method anyway except that it caters for ie5mac as well.

  8. #8
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I use this method below because it works from ie5 mac upwards and I just paste it in the markup and forget about it.
    With the method you outlined above, do I need the IE conditional comments or do I simply need to add the code you supplied and that's it?

    I think I'm confused now cause I've got three methods here and they seem to be running together. I don't know what styles I should use for each.

    Quote Originally Posted by all4nerds View Post
    Hello

    The clear div’s also acts as a push box so that content is not hidden by the way the footer is positioned absolute
    With the newer clearing code there is no need for an extra div in the code so position the footer in that way is not efficient because you still need a push box or padding margin on the content

    Is the newer way better ?, it will do in most cases, but sometimes there are problems with space at the bottom if there is no container after the wrapper that contains the floats, and an additional overflow hidden is not solving the problem

    And some People think , consider this a real heavy hacked together code

    PS to test if floats are cleared install Netscape 6.1 or 6.2 and clearing problems are immediately visible if a page is viewed in it
    Thank you! I'll see if I can find Netscape 6.1 or 6.2 somewhere to download. I think they're on version 8.x now.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  9. #9
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All4Nerds:

    I was looking through the code you gave me originally. I have a couple questions. I can't figure out why the wrapper has been given a top negative margin of -50px? I see that when it's set to 0 you get the 50 black stripe at the top, but what causes that? Just from setting the footer?

    Also, why did the navigation menu need a class of fc for the haslayout stuff? I need to read up on the haslayout, I don't quite understand it.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I was looking through the code you gave me originally. I have a couple questions. I can't figure out why the wrapper has been given a top negative margin of -50px?
    Its just another way of making room for the footer to sit at the bottom. I used a negative margin on the top of the footer to pull it into view and Ben just added a top margin on the wrapper to move it up right from the start.

    They both do the same thing. In my other example I had a negative margin on the bottom of the wrapper which did the same thing also.

    Bens method just accounts for the space at the start by using a 50px border to soak up some space whereas my examples either use the clearfooter technique or use padding at the bottom of the element before the footer.

    Also, why did the navigation menu need a class of fc for the haslayout stuff?
    I haven't double checked the code but I'm assuming it was to auto clear the floats. Ben is using .fc whereas I used .clearfix. I assume fc stands for float clear.

    Read the css faq to read more about float clearing. There is also an entry on "haslayout" which you should also read

  11. #11
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that I have now butchered this layout. Everything that's been said in the thread is just all jumbled together in my head and I don't know what's what now.

    http://www.deronsizemore.com/test/index.html

    As you can see the footer doesn't set at the bottom of the window now. I tried to use the PIE clearfix method of clearing the footer and I believe I also messed that one up.

    I think I was confused to begin with anyway. All the different methods of clearing the floats, for some reason I kept thinking these were all different methods setting the footer at the bottom of the window (which is why I used the absolute positioning for in the first place from the faq).

    I think about to just start from scratch, I've got everything so jumbled together now.

    I will go read the faq documents you suggested.

    What do you think?
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You only need to change a couple of things.

    Add these bits in bold:
    Code:
    #wrapper {
        min-height: 100&#37;;
        height: auto;
        background: #fff url(images/wrapper_bg.gif) repeat-y;
        width: 1000px;
        margin: -50px auto 0;
        text-align: left;
    }
    * html #wrapper {height: 100%;} /* ie6 and under*/
    
    #masthead {
        background: #fff;
        height: 100px;
        width: 1000px;
        border-top:50px solid #000000;
    }
    #footer {
        width: 1000px;
        clear: both;
        background: #454545;
        height: 50px;
        margin:0 auto ;
        position:relative;
    }
    Move the footer to here:

    Code:
        </div>
    </div>
    <!-- end #wrapper -->
        <div id="footer"> FOOTER </div>
        <!-- end #footer -->
    </body>
    </html>
    You will also need to remove the html comments between your floated columns as they are triggering an IE bug. You don't need to comment every section anyway as that is just a waste. Well formatted code is just as good as comments.

    Take a break and then come back and read Bens and my comments as we are saying the same things but maybe in slightly different ways. With CSS there's always more than one way to do something.

    You need to get a good understanding of how this all works and how it fits together before you can start taking it apart for yourself

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The whole code just in case you messed it up

    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>
    <title>New Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <meta name="robots" content="all" />
    <meta http-equiv="imagetoolbar" content="false" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="Author" content="Deron Sizemore" />
    <meta name="copyright" content="" />
    <style type="text/css">
    /*-------------------------------------------------
    Style Sheet
    
    Version:    1.0
    Author:        Deron Sizemore
    Website:    http://www.deronsizemore.com
    -------------------------------------------------*/
    
    /* commented backslash hack \*/ 
    html, body{height:100&#37;;} 
    /* end hack */
    
    .clearfix:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .clearfix {
        display:inline-block;
    }
    
     /* mac hide \*/
        * html .clearfix {height: 1%;}
          .clearfix {display: block;}
     /* End hide */
    
    body {
        background: #ccc url(images/body_bg.gif) repeat-x;
        font-family: Verdana, Arial, Sans-Serif;
        font-size: 62.5%;
        text-align: center;
        min-width: 1000px;
        color: #666;
    }
    
    * {
        margin: 0;
        padding: 0;
    }
    
    #wrapper {
        min-height: 100%;
        height: auto;
        background: #fff url(images/wrapper_bg.gif) repeat-y;
        width: 1000px;
        margin: -50px auto 0;
        text-align: left;
    }
    * html #wrapper {height: 100%;} /* ie6 and under*/
    
    #masthead {
        background: #fff;
        height: 100px;
        width: 1000px;
        border-top:50px solid #000000;
    }
    #footer {
        width: 1000px;
        clear: both;
        background: #454545;
        height: 50px;
                    margin:0 auto ;
                    position:relative;
    }
    
    
    
    ul#mainnav {
        list-style: none;
        width: 1000px;
        float: left;
        background: #454545;
    }
    ul#mainnav li {
        float: left;
    }
    ul#mainnav a {
        font-size: 1.3em;
        display: block;
        float: left;
        padding: 0 1.3em;
        line-height: 2.1em;
        text-decoration: none;
        color: #fff;
    }
    ul#mainnav a:hover {
        background: #898989;
    }
    
    #home #mainnav .home a {
        background: #898989;
    }
    
    #maincontent {
        width: 490px;
        float: left;
        font-size: 1.4em;
    }
    
    #secondarycontent {
        width: 270px;
        float: left;
        font-size: 1.2em;
    }
    
    #sidebar {
        width: 240px;
        float: left;
    }
    
    #footer {
        width: 1000px;
        clear: both;
        background: #454545;
        height: 50px;
                    margin:0 auto ;
                    position:relative;
    }
    
    #maincontent p,#secondarycontent p,#sidebar p, #extraleft p, #extramiddle p, #extraright p {padding:10px;}
    
    
    
    </style>
    </head>
    <body id="home">
    <div id="wrapper" class="clearfix">
        <div id="masthead"> MASTHEAD </div>
        <!-- end #masthead -->
        <ul id="mainnav">
            <li class="home"><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">NEWS</a></li>
            <li><a href="#">PRODUCTS</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">CLIENTS</a></li>
            <li><a href="#">CONTACT US</a></li>
        </ul>
        <div id="maincontent">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pellentesque sollicitudin urna. Etiam pellentesque tortor. Curabitur vel turpis. Ut ultricies molestie nulla. Proin suscipit euismod lacus. Quisque sagittis ornare lectus. Maecenas sed tellus eu leo ornare varius. Aliquam bibendum viverra arcu. Sed sed velit. Aliquam lacinia odio.
                Ut eleifend pellentesque mi. Vestibulum venenatis est nec justo lacinia semper. Vestibulum a massa in orci dignissim iaculis. Sed porttitor. Donec vestibulum tortor a turpis. Suspendisse cursus auctor lacus. Suspendisse potenti. In ut nulla. Donec eget mi id nisl euismod placerat. Maecenas condimentum massa quis ligula. Quisque ut mauris in felis
                venenatis vestibulum. Nullam id magna. Nam non eros eu arcu laoreet vehicula. Ut fermentum rutrum elit. Vivamus feugiat est nec urna. Donec vitae enim. Maecenas lectus ligula, pharetra posuere, volutpat quis, hendrerit sed, felis. Duis arcu. Pellentesque laoreet risus vitae tortor. Nunc ut leo sit amet justo ornare posuere. Nam urna ante, lacinia
                ac, euismod a, mattis non, tellus. </p>
        </div>
        <div id="secondarycontent">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pellentesque sollicitudin urna. Etiam pellentesque tortor. Curabitur vel turpis. Ut ultricies molestie nulla. Proin suscipit euismod lacus. Quisque sagittis ornare lectus. Maecenas sed tellus eu leo ornare varius. Aliquam bibendum viverra arcu. Sed sed velit. Aliquam lacinia odio.
                Ut eleifend pellentesque mi. Vestibulum venenatis est nec justo lacinia semper. Vestibulum a massa in orci dignissim iaculis. Sed porttitor. Donec vestibulum tortor a turpis.</p>
        </div>
        <div id="sidebar">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pellentesque sollicitudin urna. Etiam pellentesque tortor. Curabitur vel turpis. Ut ultricies molestie nulla. Proin suscipit euismod lacus. Quisque sagittis ornare lectus. Maecenas sed tellus eu leo ornare varius. Aliquam bibendum viverra arcu. Sed sed velit. Aliquam lacinia odio.
                Ut eleifend pellentesque mi. Vestibulum venenatis est nec justo lacinia semper. Vestibulum a massa in orci dignissim iaculis. Sed porttitor. Donec vestibulum tortor a turpis. Suspendisse cursus auctor lacus. Suspendisse potenti. In ut nulla. Donec eget mi id nisl euismod placerat. Maecenas condimentum massa quis ligula. Quisque ut mauris in felis
                venenatis vestibulum. Nullam id magna. Nam non eros eu arcu laoreet vehicula. Ut fermentum rutrum elit. Vivamus feugiat est nec urna. Donec vitae enim. Maecenas lectus ligula, pharetra posuere, volutpat quis, hendrerit sed, felis. Duis arcu. Pellentesque laoreet risus vitae tortor. Nunc ut leo sit amet justo ornare posuere. Nam urna ante, lacinia
                ac, euismod a, mattis non, tellus. </p>
        </div>
    </div>
    <!-- end #wrapper -->
        <div id="footer"> FOOTER </div>
        <!-- end #footer -->
    </body>
    </html>

  14. #14
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,
    Take a break and then come back and read Bens and my comments as we are saying the same things but maybe in slightly different ways. With CSS there's always more than one way to do something.

    You need to get a good understanding of how this all works and how it fits together before you can start taking it apart for yourself
    Yes, I think you're right about just taking a break. I sit here and bang my head for hours on something and I think if I just take a break sometimes I'd be better off.

    Quote Originally Posted by Paul O'B View Post
    The whole code just in case you messed it up
    I see you're starting to get a feel for how quickly I can make a mess of things!

    http://www.deronsizemore.com/test

    I've made some more additions to the page. I'd be grateful if you could take a quick look at my code and see if anything major wrong is going on or if there is anything I could make work better than it is. I think I have everything correct but I don't know. The code validates, but I know that doesn't always mean anything.

    I noticed too that if I made the footer height less than 35px it didn't react correctly, so I changed the height attribute to auto instead of a fixed height amount. I really don't need a fixed height, just want it to expand around how much content is there.

    Thanks
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As Ben said you would find things easier if you didn't go for the 100&#37; footer. Most pages are higher than viewport height anyway and so it rarely comes into play anyway.

    Anyway just to recap on the 100% footer techniques there are 3 things you must remember.

    1) The footer must have a height as you need this to allow room for it to fit into position You must calculate the height including any padding and borders. (You could apply a min-height instead and this would allow the element to expand if text is wrapping at smaller screen sizes.). However the best way for this type of footer is just to have a fixed height and is best used for copyright messages and a few links that don't need to wrap etc.

    2) The negative margin that you apply must equal the height of the footer. This is the way that the layout makes room for the footer. The negative margin on the wrapper creates the space for the footer to fall in place. (In one of the other layouts I used a negative margin on the footer instead.) There are many different ways to do this.

    What you have to remember is that the main wrapper is 100% high and therefore to get something else to sit on that page you need to lose some of the height with a negative margin.

    3) Then you need to account for the space of the footer by using one of the methods in the above posts. Ben uses a 50px top border on the first element in the page. I used a clear footer with a 50px height to do the same job. The reason for this is that although you have reduced the page by 50px with a negative margin the content will still flow into this space and overlap the footer. Therefore you have to soak up this extra space with padding or with a border like Ben has done.

    All three elements work together and must change together. Footer height, negative margin and clearfooter must all match the exact height of the footer.

    Hope that makes sense

  16. #16
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds View Post
    PS your footer has 10px padding on the P tag, 35px + 2x10px = a height of 55px
    I'm obviously mistaken here, but I thought that if you add the padding to an element such as a <p> tag, it doesn't add any height or width to the parent? If I and add the same 10px to the footer instead of the p tag, then it expands out and seems to add to the total width and height.

    Quote Originally Posted by Paul O'B View Post
    As Ben said you would find things easier if you didn't go for the 100% footer. Most pages are higher than viewport height anyway and so it rarely comes into play anyway.

    Anyway just to recap on the 100% footer techniques there are 3 things you must remember.

    1) The footer must have a height as you need this to allow room for it to fit into position You must calculate the height including any padding and borders. (You could apply a min-height instead and this would allow the element to expand if text is wrapping at smaller screen sizes.). However the best way for this type of footer is just to have a fixed height and is best used for copyright messages and a few links that don't need to wrap etc.

    2) The negative margin that you apply must equal the height of the footer. This is the way that the layout makes room for the footer. The negative margin on the wrapper creates the space for the footer to fall in place. (In one of the other layouts I used a negative margin on the footer instead.) There are many different ways to do this.

    What you have to remember is that the main wrapper is 100% high and therefore to get something else to sit on that page you need to lose some of the height with a negative margin.

    3) Then you need to account for the space of the footer by using one of the methods in the above posts. Ben uses a 50px top border on the first element in the page. I used a clear footer with a 50px height to do the same job. The reason for this is that although you have reduced the page by 50px with a negative margin the content will still flow into this space and overlap the footer. Therefore you have to soak up this extra space with padding or with a border like Ben has done.

    All three elements work together and must change together. Footer height, negative margin and clearfooter must all match the exact height of the footer.

    Hope that makes sense
    Yes, that all makes sense! The test will be later down the road if I can actually reproduce this technique without cheating.

    Like I asked above with Ben, when you add the padding to a p tag, it doesn't add to the effective height of the footer right? If I added the 10px padding to the footer itself, then it would add to the height I thought?

    I'm just trying to get that part straight cause I notice you said that "You must calculate the height including any padding and borders." So I didn't know if since I have 10px padding on the p tag, if I should now make the height of my footer 70px and adjust the negative margin/top border to 70px as well to match?

    Thanks
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As long as the inner content of the footer doesn't stretch the height of the footer then you're ok. Your footer is 35px high but inside it you have a p tag which has 20px padding height and then you have the font size and line-height to take into account which is very close to matching the height of the footer.

    However it looks as though its just about ok.

  18. #18
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I'm thinking of the broken box model in IE as far as how I'm thinking with adding padding to the p tag instead of the #footer itself. I know you're suppose to add padding to the inner element so it doesn't add to the effective width of the parent in the box model. I guess I thought the height worked the same way.

    So with the code below...am I understanding correctly?

    Code:
    #parentbox {
      height: 20px;
    }
    #childbox {
      padding: 10px;
    }
    #childbox p {
      padding: 10px;
    }
    <div id="parentbox">
      <div id="childbox">
      <p>Some text here</p>
      </div>
    </div>
    So with the above code, no matter where I add the padding, it adds to the effective height of the parent container? In this case the total height would be 60px?


    And...with my site, if I have my footer height set to 50px with padding on the p tag set to 10px then that makes the total height 70px, therefore I will also need to change the negative margin to -70 and change the top border to 70px so they match the total height of the footer with padding and all? Is that correct?

    If you check out the site now: http://www.deronsizemore.com/test you can see that I've done just that (what I said above) I have the footer height of 50px and padding set to 20px on the p tag which will add 40px total to the height, so I went and changed the negative margin to -90px and changed the to border to 90px. It looks presentable, but you can see there is a pixel or two of space directly below the footer and I don't see where the problem lies? I'm sure it's something with me not figuring padding/heights correctly together.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  19. #19
    SitePoint Enthusiast vladut's Avatar
    Join Date
    Sep 2006
    Location
    Chisinau, moldova
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, I had the same problem only my website was create for 1280-1024 resolution(pretty big, yes?)
    Did you try some alignment?
    It worked for me..
    Powerful PR4 Directory Free Advertising Forum
    DO NOT BUY hosting from greenlush

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Deron,

    No you are getting a bit confused here.

    You were right in your first assumption and the padding on inner elements will not contribute to the height of the parent. It will only contribute to the height if you make the inner elements bigger than the space they fit in and even then it will only be IE that stretches the parent.

    Your footer is still only 50px high (I just measured it on screen) and that is the dimension you should be working with.

    Yur example above doesn't make sense because you have set the parent to 20px and that is the height that it will stay in browsers like mozilla. If you add 20px padding inside that element then there is nowhere for the content to go and it will overflow. IE however will stretch the footer accommodate the larger content.

    Padding and borders will only affect the height when they are added to the element that has the height on it. Inner elements will not count towards the height. I think Ben confused you a bit earlier.

  21. #21
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi Deron,

    No you are getting a bit confused here.

    You were right in your first assumption and the padding on inner elements will not contribute to the height of the parent. It will only contribute to the height if you make the inner elements bigger than the space they fit in and even then it will only be IE that stretches the parent.

    Your footer is still only 50px high (I just measured it on screen) and that is the dimension you should be working with.

    Yur example above doesn't make sense because you have set the parent to 20px and that is the height that it will stay in browsers like mozilla. If you add 20px padding inside that element then there is nowhere for the content to go and it will overflow. IE however will stretch the footer accommodate the larger content.

    Padding and borders will only affect the height when they are added to the element that has the height on it. Inner elements will not count towards the height. I think Ben confused you a bit earlier.
    Yes, I guess Ben confused me earlier with this line:

    PS your footer has 10px padding on the P tag, 35px + 2x10px = a height of 55px
    Seems like he was saying that the padding adds to the total height of the container (footer) so that's when I started second guessing everything I 'thought' I had learned. lol.

    Yeah, the footer is still 50px but I made it have padding of 20px so I thought that would add 40px total to the height when in actuality it doesn't, I was just confused. So that's why I was thinking that since I 'added' 40px of padding with the top and bottom total, that would now make my footer 90px in height when it doesn't.

    I noticed to that with the small gap that seemed to show up under the footer when I added more padding to the p tag, that was simply because the footer wasn't big enough to hold all of the padding so it was just overflowing (like you said above).

    I think I got it sorted out now (hopefully anyway).

    Thanks for your extreme patience Paul. I hope I don't have to bug you with anymore problems for a while!
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  22. #22
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Code:
    .clearfix:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .clearfix {
        display:inline-block;
    }
    
     /* mac hide \*/
        * html .clearfix {height: 1%;}
          .clearfix {display: block;}
     /* End hide */

    Hi Paul. I noticed that this part of the code above:

    Code:
    .clearfix {
        display:inline-block;
    }
    Doesn't validate. Is it suppose to? It doesn't really make any difference to me as long as the site works, I just didn't know if there was a typo or something in there that was causing it to not validate.

    Thanks
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by w3cvalidator
    W3C CSS Validator Results for file://localhost/TextArea

    No error or warning found

    Valid CSS information

    .clearfix { display : inline-block;

    }





    Its valid css3

  24. #24
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Its valid css3
    I see. I was just using my trusty Firefox web developer toolbar to validate and it evidently was validating against earlier versions of CSS.

    Thank you.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore


Bookmarks

Posting Permissions

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