SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 35
  1. #1
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sticky Footer question

    If I am using a 3-Column, Fixed-Width layout combined with the "Sticky Footer" approach, is there a way to get the background color of each column to expand all the way down to the footer?

    The only way I have seen to do this, is to create a 3-colored image slice (i.e. a different color on the slice for each column) and repeat it vertically.

    I would prefer doing the same thing but not being dependent on using a background image to accomplish this.

    Any ideas?


    TomTees

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    If it is a fixed width site a BG image is the best way to do it.

    Anything other than that requires empty divs for AP faux columns (extra markup & css).
    Those are really only needed when it is a fluid width site.

    I think Paul had already given you this link in another thread
    http://www.pmob.co.uk/temp/3col-stic...r-min-max2.htm

    http://www.search-this.com/2007/02/2...olumns-in-css/

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are different ways to have equal columns. One you mentioned yourself already. But to stay as close as possible to the layout you have so far, without to many adjustments, you you could do the following. Give the columns you would like to match the highest column (in your case that would be col1 and col3) a very large padding-bottom and an equal negative margin-bottom and set overflow: hidden; for the wrapper. The only thing you have to adjust is take the footer out of the wrapper. I.e.
    Code CSS:
    html, body, h1, h2, p, div {
    	margin: 0;
    	padding: 0;
    }
     
     
     
    body {
    	width: 100%;
    	line-height: 1;
    	font: 100%/130% Arial, Helvetica, sans-serif; 	
    }
     
    #wrapper {
    	width: 930px;
    	margin: 0 auto;
    	overflow: hidden;
    	background-color: #E0E0EB;
    	border: 1px solid #FFFFFF;
    }
     
    /* HEADER */
    #header {
    	width: 100%;
    	color: white;
    	background-color: black;
    }
     
    /* NAVIGATION */
    #nav {
    	background-color: orange;
    }
     
    /* LEFT COLUMN */
    #col1 {
    	width: 150px;
    	margin-bottom: -1000px;
    	padding-bottom: 1000px;
    	float: left;
     
    	background-color: yellow;
    }
     
    /* CENTER COLUMN */
    #col2 {
    	width: 630px;
    	float: left;
    	background-color: #CCFFFF;
    }
     
    /* RIGHT COLUMN */
    #col3 {
    	width: 150px;
    	margin-bottom: -1000px;
    	padding-bottom: 1000px;
    	float: left;
    	background-color: #D685AD;
    }
    /* FOOTER */
    #footer {
    	width: 930px;
    	margin: 0 auto;
    	clear: both;
    	background-color: gray;
    }
    Code HTML4Strict:
    <div id="wrapper">
     
        <div id="header">
        <h1>HEADER</h1>
        <div id="nav">NAVIGATION</div>
        </div>
     
    <div>Your text here</div>
     
    <div id="col1">COL1</div>
     
    <div id="col2">
    <h2>COL2</h2>
    </div>
     
    <div id="col3">COL3</div>
     
    </div>
     
    <div id="footer">FOOTER</div>

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ^ That margin/padding method from the "One True Layout" has one major problem with it (among others).
    Linking to an anchor in any of the columns within the element that has been set to overflow: hidden causes the content of that column to shift upwards. In IE and Firefox, that is.
    http://www.positioniseverything.net/...heightproblems

    It is for that reason that we don't recommend using it.

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    It is for that reason that we don't recommend using it.
    Hi Rayzur. In the times I used this method, I never had to link to anchors in the containing block. It was most of the time for layout purpose so that's why I probably never had problems But thank you for the tip and link on this.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by donboe View Post
    Hi Rayzur. In the times I used this method, I never had to link to anchors in the containing block. It was most of the time for layout purpose so that's why I probably never had problems But thank you for the tip and link on this.
    Yes, if you don't have "in page links" then you could probably get away with it and it is a clever method. However most sites do have some "in page" links and therefore is not really a "safe" solution for all but a useful technique to know all the same.

  7. #7
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul O'B, like I said, I was never in the situation where I had those "In page links", at least not in a design as suggested by me! So what would you suggest if such a situation might occur? A background image?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by donboe View Post
    Hi Paul O'B, like I said, I was never in the situation where I had those "In page links", at least not in a design as suggested by me! So what would you suggest if such a situation might occur? A background image?
    I usually go for the simpler option and the faux column approach is something that can be usually down without having to massage the mark up at all as none times out of ten there is a container already in place that you can use.

    The absolute columns example of mine that Ray linked to has no such problems as the negative margin/padding method but works at the expense of having to add extra html elements. the benefit is that no images are used and can be used in fluid of fixed containers as required.

    The padding/margin method you are using is fine if you have control of the page and don't have "in-page" links so there would be no need to change.

    Most other sites often have "in-page" links though and I like solutions that don't rely on something always being the same as you can never tell what may happen down the line. A client may add an in-page link at a later date and break the site completely (and believe me the page is completely unusable once you have followed the link as all content above the target link vanishes).

  9. #9
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    If it is a fixed width site a BG image is the best way to do it.
    And how would I create one of those if I don't have Photoshop?


    Anything other than that requires empty divs for AP faux columns (extra markup & css).

    Those are really only needed when it is a fluid width site.
    I looked at the link and at the code, but th code is hard to follow...

    1.) Why is there an extra "Outer" div?

    2.) What does this do?

    Code HTML4Strict:
    <div class="clearer"></div>

    3.) Should the Footer be outside of the Wrapper if you want a "Sticky Footer"?

    4.) Why does "Wrapper" have a z-index of 5 (putting it on top)?

    5.) What does this do?

    Code CSS:
    .col{
    	width:200px;
    	position:absolute;
    	z-index:0;
    	left:10px;
    	bottom:0;
    	border:1px solid #000;
    	border-top:none;
    }

    6.) I'm not following this code either...

    Code CSS:
    .one{background:red;}
    .two{background:#FF6600;left:222px;width:334px;}
    .three{background:#CC3399;left:568px;}

    Seems like an awful lot of work to do something that should be so simple?!



    TomTees

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    If it is a fixed width site a BG image is the best way to do it.
    ... and since fixed width sites are half-assed crap that are usually more annoyance than useful...

  11. #11
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Attached is my latest code and a screen-shot of my best attempt at Paul O's 3-Column, Fixed-width, Centered, with Sticky Footer layout.

    (Now *that* is a mouthful!!)

    It looks pretty good, however, I'm still confused and annoyed about the background colors not extending down to meet my Sticky Footer.

    The background color for my "wrapperLessFooter" div goes all the way to the bottom, but "col1", "col2", and "col3" do not?!

    I am starting to agree with Rayzur that using a multi-shaded background image slice would be easiest. However, I don't have any software to do that, and I like to know how to solve problems multiple ways.

    Paul O' has been a magnificent resource, however, I was having a hard time following that old link about using absolute div's to do this.

    Again, if my gray "wrapperLessFooter" DIV is reaching all of the way down to my Sticky Footer, then why won't Columns 1, 2, and 3?

    One more thing...

    I only have a MacBook, and so I am flying blind here on how my code would look in Windows or Internet Explorer, so that makes learning that much harder at the moment...

    If someone could comment on my code and screenshot thus far, it would be helpful.

    Thanks,



    TomTees
    Attached Images Attached Images
    Attached Files Attached Files

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You seem to have implemented most things correctly but you have added borders to the 100&#37; element making it 2px too tall and hence the scrollbar when none is needed.

    As you aren't using a background image then you can only make full length columns in the ways that we have shown you. I prefer the absolute column technique and added to your code would look like this.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="04_ThreeCol_Fixed_StickyFooter.css">
    <style type="text/css">
    html, body, h1, h2{
        margin: 0;
        padding: 0;
    }
    html, body {
        height: 100%;        /* Used to base height on. */
    }
    /* PAGE CONTAINER */
    #wrapperLessFooter {
        width: 930px;
        min-height: 100%;
        margin: 0 auto;
        margin-top: -40px;    /* Used to offset Footer height*/
        background-color: #CCFFFF;
        /*    background:url(images/3colbackground.gif) repeat-y 0 0;    /* Create the illusion of 3 columns with one background image. */
        border: 1px solid #FFF;
        border-top:none;
        border-bottom:none;
        position:relative;
    }
    * html #wrapperLessFooter {        /* IE6 and under only. */
        height:100%;
    }
    /* HEADER */
    #header {
        width: 100%;
        color: white;
        background-color: black;
        border-top: 40px solid #000;        /* Soaks up negative margin.  Allows header to start at top of page. *//*    background:blue;    /*Cover up background image on #wrapper. */
        position:relative;
        z-index:2;
    }
    /* NAVIGATION */
    #nav {
        background-color: orange;
    }
    /* LEFT COLUMN */
    #col1 {
        float: left;
        width: 150px;
        min-height: 100px;    /* In case of no content, prevents Floats from moving over to fill space. */
        background-color: yellow;
        position:relative;
        z-index:2;
    }
    /* CENTER COLUMN */
    #col2 {
        float: left;
        width: 630px;
        min-height: 100px;    /* In case of no content, prevents Floats from moving over to fill space. */
        position:relative;
        z-index:2;
    }
    /* RIGHT COLUMN */
    #col3 {
        float: right;
        width: 150px;
        min-height: 100px;    /* In case of no content, prevents Floats from moving over to fill space. */
        background: #D685AD;
        position:relative;
        z-index:2;
    }
    /* FOOTER */
    #footer {
        clear: both;
        width: 930px;
        height: 40px;        /* Matches negative margin on wrapperLessFooter. */
        margin: 0 auto;
        background-color: gray;
    }
    /* OPERA FIX */
    body:before {
        float: left;
        width: 0;
        height: 100%;
        margin-top: -32767px;        /* Negates effect of float. */
        content: "";
    }
    h1, h2, p {
        padding: 0 10px;        /* ?????? */
    }
    #wrapperLessFooter:after {        /* Instead of using display table for IE8. */
        clear: both;
        display: block;
        height: 1%;
        content: " ";
    }
    /* absolute background overlay*/
    #one,#three{
        position:absolute;
        top:0;
        bottom:0;
        width:150px;
        clear:both;
    }
    #one{    background: yellow;left:0}
    #three{    background: #D685AD;right:0}
    /* ie6 fix*/
    * html #one,* html #three {height:9999em;top:auto}
    </style>
    </head>
    <body>
    <div id="wrapperLessFooter">
        <div id="header">
            <h1>HEADER</h1>
            <div id="nav"> NAVIGATION </div>
        </div>
        <div id="col1">COL1</div>
        <div id="col2">
            <h2>COL2</h2>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ipsum
                felis, eleifend ut congue mattis, iaculis ac quam. Nam luctus
                scelerisque felis, ac adipiscing metus facilisis in. Nullam et nisl
                eu justo luctus sodales in varius arcu. Nunc enim leo, laoreet vitae
                dapibus eget, malesuada nec erat. Nunc bibendum sapien vel lorem
                laoreet lacinia. Vestibulum tortor elit, ultrices vitae luctus quis,
                iaculis non libero. Quisque imperdiet tristique facilisis. Morbi
                dictum, purus quis tempor malesuada, sem libero rhoncus ipsum, sed
                gravida elit erat nec velit. Morbi feugiat sollicitudin ipsum luctus
                pulvinar. Integer id nisi mi. Sed quis ligula sapien. In pulvinar
                commodo arcu vel pellentesque. Quisque eu volutpat elit. Donec dui
                tellus, consequat at dignissim et, ullamcorper sed enim. Vivamus et
                est dui, ut sollicitudin sapien. Curabitur malesuada tellus eget diam
                faucibus dapibus. Curabitur porta nulla ut quam bibendum quis auctor
                sem elementum. Sed pretium sollicitudin tellus, eget vestibulum
                lectus feugiat dapibus. Mauris vel velit vitae ligula auctor sagittis
                vitae non augue. Praesent sit amet fermentum turpis. </p>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ipsum
                felis, eleifend ut congue mattis, iaculis ac quam. Nam luctus
                scelerisque felis, ac adipiscing metus facilisis in. Nullam et nisl
                eu justo luctus sodales in varius arcu. Nunc enim leo, laoreet vitae
                dapibus eget, malesuada nec erat. Nunc bibendum sapien vel lorem
                laoreet lacinia. Vestibulum tortor elit, ultrices vitae luctus quis,
                iaculis non libero. Quisque imperdiet tristique facilisis. Morbi
                dictum, purus quis tempor malesuada, sem libero rhoncus ipsum, sed
                gravida elit erat nec velit. Morbi feugiat sollicitudin ipsum luctus
                pulvinar. Integer id nisi mi. Sed quis ligula sapien. In pulvinar
                commodo arcu vel pellentesque. Quisque eu volutpat elit. Donec dui
                tellus, consequat at dignissim et, ullamcorper sed enim. Vivamus et
                est dui, ut sollicitudin sapien. Curabitur malesuada tellus eget diam
                faucibus dapibus. Curabitur porta nulla ut quam bibendum quis auctor
                sem elementum. Sed pretium sollicitudin tellus, eget vestibulum
                lectus feugiat dapibus. Mauris vel velit vitae ligula auctor sagittis
                vitae non augue. Praesent sit amet fermentum turpis. </p>
             </div>
        <div id="col3">COL3</div>
        <!-- these elements just provide the background colour -->
        <div id="one"></div>
        <div id="three"></div>
    </div>
    <div id="footer">FOOTER</div>
    </body>
    </html>
    The technique is explained in full in this article so you need to read it thoroughly. It uses an extra element that is placed absolutely over a column and can provide a full column colour because absolute elements can use top and bottom at the same time and match the height of the relative parent. Only absolute elements can do this.

    In CSS you have one shot at 100% height and that's because you can only use min-height:100% once. The wrapper element bases it's min-height:100% on the 100% height we applied to html and body. You can only base a percentage min-height on an element that has a height defined. You cannot base a height on an element that is content height or has a percentage min-height. Read the faq on 100% height for more info as it is an important subject.

    It's like a catch 22 situation because you can instead use height:100% on the wrapper and that would allow you to further nest elements of 100% height. However setting height:100% means the element could never grow past the bottom of the viewport and content would just spill out.

    As I said at the beginning you are better off keeping things simple from the start especially if you find these issues hard to digest to begin with. We could of course use the display:table properties to get the effect you want but as IE7 and under don't understand it then it's not worth the effort yet.

    In CSS we usually let the content dictate the height. We let elements contract and grow as necessary unlike a table which keeps making all cells equal.

  13. #13
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    ... and since fixed width sites are half-assed crap that are usually more annoyance than useful...
    Yeah yeah, we are well aware of your opinions around here. They are kinda like your description of fixed width sites. All I did was say "If it is a fixed width site" and here you come spouting off again. I hate to break it to you, but your hatred for fixed width sites is not enough to stop people from using them. Get over it already!

  14. #14
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay Paul O', you offered to help me out some more, so here come a whole bunch of questions regarding your solution above.

    Attached is a screenshot of my finished (and working) example. In addition, I am attaching my code in case you need it for reference.

    Questions are in BOLD below...



    STYLESHEET: 05_ThreeCol_Fixed_Sticky_ColoredCols.css
    Code CSS:
    html, body, h1, h2{
    	margin: 0;
    	padding: 0;
    }
     
    html, body {
    	height: 100%;			/* Set a baseline for height. */
    }

    Okay so far...


    Code CSS:
    /* PAGE CONTAINER */
    #wrapperMinusFooter {
    	width: 930px;					/* Width of Content. */
    	min-height: 100%;			/* Based on height of <body>. */
    	margin: 0 auto;				/* Center page. */
    	margin-top: -40px;		/* Used to offset Footer height. */
    	background-color: #CCFFFF;
    	/* background:url(images/3colbackground.gif) repeat-y 0 0;	*/
    	/* Create the illusion of 3 columns with one background image. */
    	border: 0 1px solid #FFFFFF;
      position: relative;		/* Containing Block */	/* NEW */
    }

    We make this selector (position: relative) to create a "containing block" from which all absolute positioned selectors will base their settings on, correct?



    Code CSS:
    * html #wrapperMinusFooter {		/* IE6 and under only. */
        height:100%;
    }

    What is * html called again?

    What is it that we are doing here again? (This wasn't in your article but was somewhere else that I forgot.)


    Code CSS:
    /* HEADER */
    #header {
    	z-index: 2;	/* NEW */
    	position: relative;	/* NEW */
    	width: 100%;
    	color: #FFFFFF;
    	background-color: #000000;
    	border-top: 40px solid #FF0000;		/* Offset negative margin of #wrapperMinusFooter. */
    }

    In order to set a "z-index" this selector must be a "positioned" item, right?

    By setting the z-index=2 we are placing it on top of our later-to-follow colored absolute columns, right? (I think they are left blank making them have a z-index=0, right?)

    Why do we set position: relative for the header?

    If there was no background-color would we see our later-to-follow colored absolute columns?



    Code CSS:
    /* NAVIGATION BAR */
    #nav {
    	background-color: orange;
    }

    Nothing special here!


    Code CSS:
    /* LEFT COLUMN */
    #col1 {
    	z-index: 2;	/* NEW */
    	position: relative;		/* Containing Block */	/* NEW */
    	float: left;
    	width: 150px;
    	min-height: 100px;		/* If no content, prevent Floats from moving over to fill space. */
    	background-color: yellow;
    }

    Same questions as above about why we chose the z-index and position: relative here...


    Code Cpp:
    /* CENTER COLUMN */
    #col2 {
    	z-index: 2;	/* NEW */
    	position: relative;		/* Containing Block */	/* NEW */
    	float: left;
    	width: 630px;
    	min-height: 100px;		/* If no content, prevent Floats from moving over to fill space. */
    	background-color: #CCFFFF;
    }

    More of the same...


    Code CSS:
    /* RIGHT COLUMN */
    #col3 {
    	z-index: 2;	/* NEW */
    	position: relative;		/* Containing Block */	/* NEW */
    	float: right;
    	width: 150px;
    	background-color: #D685AD;
    }

    More of the same...


    Code CSS:
    /* FOOTER */
    #footer {
    	clear: both;			/* Keep below columns. */
    	width: 930px;
    	height: 40px;			/* Matches negative margin on #wrapperMinusFooter. */
    	margin: 0 auto;
    	background-color: gray;
    }

    Apparently the clear: both works work the Floats above as it normally would, right? (i.e. our absolute columns won't mess it up?)


    Code CSS:
    /* OPERA FIX */
    body:before {
        float: left;
        width: 0;
        height: 100%;
        margin-top: -32767px;		/* Negates effect of float. */
        content: "";
    }

    I have no clue what this says or is doing?! If you could take some time to explain it better, that would be fabulous!!


    Code CSS:
    h1, h2, p {
        padding: 0 10px;		/* ?????? */
    }

    Does this have any *hidden meaning/purpose* or are you just adding some padding?!


    Code CSS:
    /* IE8 FIX INSTEAD OF USING DISPLAY TABLE. */
    #wrapperMinusFooter:after {
        clear: both;
        display: block;
        height: 1%;
        content: " ";
    }

    I have no clue what this says or is doing?! If you could take some time to explain it better, that would be fabulous!!


    Code CSS:
    /* CREATE BACKGROUND COLOR FOR COLUMNS */
    #one{
    	clear: both;
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	width: 150px;
    	background: yellow;
    }

    Apparently the clear: both has the same purpose here as it does on my columns above with Float: Left/Right and position: relative ????


    *** Okay, here is where I am particularly confused... ***

    Your article mentions that we "attach" the absolute column to the bottom of our "containing block" (i.e. relative div) but here I see you using:

    position: absolute;
    top: 0;
    bottom: 0;


    You specifically said...

    This technique is based on the fact that if you place an absolute element inside a relative container and set the absolute element to height:100% (or top:0 and bottom:0) it will expand in tune with the parent container...
    ...but I don't understand what this does and it seems contradictory when you mention height:100% (or top:0 and bottom:0)


    You then go on to say later in your article...

    Instead we are going to place the absolute element at the bottom of the relative parent and give it a height of 1000em. Now instead of the absolute element going down the page it starts at the bottom of our columns and travels up the page and out the top of the browser window.
    ...but I don't see that in the block of code above or anywhere?!

    (In my opinion) This needs to be re-written and explained better!


    Code CSS:
    #three{
    	clear: both;
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	right: 0;
    	width: 150px;
    	background: #D685AD;
    }

    More of the same, however, why are we NOT doing this for Column #2????


    How is it that Column #2 expands the full height of the browser window when it doesn't have its own absolute column to do a background color?!



    Code CSS:
    /* IE6 FIX */
    * html #one,
    * html #three{
    		height: 9999em;
    		top: auto;
    }

    Maybe this has something to do with above, but if you could explain it in detail it would help me to know what purpose it serves and what it actually does?!


    WHEW!!! You made it!!


    Sorry for all of the questions, but this is actually trickier than it initially looks, and I am seriously about REALLY LEARNING this stuff, so your detailed responses are greatly appreciated!!!!

    Sincerely,



    TomTees
    Attached Images Attached Images
    Attached Files Attached Files

  15. #15
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Tom,

    I'll try to answer some of these for you while Paul is offline.


    We make this selector (position: relative) to create a "containing block" from which all absolute positioned selectors will base their settings on, correct?
    That's correct, the absolute positioned faux divs (#one and #three) will set their coordinates from the page wrapper now instead of the viewport.

    What is * html called again?

    What is it that we are doing here again? (This wasn't in your article but was somewhere else that I forgot.)
    That is the "star html hack", it targets IE6 and under. IE6 does not support min-max widths or heights but it has it's own little quirk where it treats height as if it were min-height. It's called the "Expanding Box" bug and it expand an element if it's content exceeds the specified width/height.


    In order to set a "z-index" this selector must be a "positioned" item, right?
    That's correct, only positioned elements are capable of taking on z-index stacking orders.

    By setting the z-index=2 we are placing it on top of our later-to-follow colored absolute columns, right? (I think they are left blank making them have a z-index=0, right?)
    That's correct, the AP faux columns extend the full height of the wrapping div and they actually paint behind the header since their coordinates are top:0; and bottom:0;

    Why do we set position: relative for the header?

    If there was no background-color would we see our later-to-follow colored absolute columns?
    RP was set on the header in order to set z-index as you answered above.

    Yes, the faux column BG colors are painting behind the header.

    /* LEFT COLUMN */
    #col1 {
    z-index: 2; /* NEW */
    position: relative; /* Containing Block */ /* NEW */
    float: left;
    width: 150px;
    min-height: 100px; /* If no content, prevent Floats from moving over to fill space. */
    background-color: yellow;
    }

    Same questions as above about why we chose the z-index and position: relative here...

    /* CENTER COLUMN */
    #col2 {
    z-index: 2; /* NEW */
    position: relative; /* Containing Block */ /* NEW */
    float: left;
    width: 630px;
    min-height: 100px; /* If no content, prevent Floats from moving over to fill space. */
    background-color: #CCFFFF;
    }

    More of the same...

    #col3 {
    z-index: 2; /* NEW */
    position: relative; /* Containing Block */ /* NEW */
    float: right;
    width: 150px;
    background-color: #D685AD;
    }

    More of the same...
    Those are the actual CONTENT divs, the only ones that really need the z-index are the left and right columns (#col1 and #col3). That is to stack them above the AP faux columns. Even though the faux columns do not have a z-value applied to them they have a higher stacking level since they are lower down in the source order. The left and right columns are getting z-index:2; to keep the text on top of the faux columns.

    #footer {
    clear: both; /* Keep below columns. */
    width: 930px;
    height: 40px; /* Matches negative margin on #wrapperMinusFooter. */
    margin: 0 auto;
    background-color: gray;
    }

    Apparently the clear: both works work the Floats above as it normally would, right? (i.e. our absolute columns won't mess it up?)
    That's right, but with the footer sitting outside of the wrapper div it is clearing the floats anyways. As long as the wrapper is containing it's floats which it is with the clearfix/IE8 rule in your question below.

    Code CSS:
    /* OPERA FIX */
    body:before {
        float: left;
        width: 0;
        height: 100&#37;;
        margin-top: -32767px;        /* Negates effect of float. */
        content: "";
    }

    I have no clue what this says or is doing?! If you could take some time to explain it better, that would be fabulous!!
    That is to fix an Opera min-height:100% bug, there is a thread running around here somewhere that explains it in detail.

    Here it is -
    Opera body:before float ? (sticky footer)

    We were able to eliminate an extra wrapping div in previous versions of the sticky footer by using a negative top margin instead.


    Code CSS:
    /* IE8 FIX INSTEAD OF USING DISPLAY TABLE. */
    #wrapperMinusFooter:after {
        clear: both;
        display: block;
        height: 1%;
        content: " ";
    }

    I have no clue what this says or is doing?! If you could take some time to explain it better, that would be fabulous!!
    That is killing two birds with one stone. It is fixing an IE8 min-height:100% bug with the height:1% rule. It forces IE8 to look to the :after block's parent (wrapper div) and confirm it's height. Since it is min-height:100% it is not a defined height and cannot be passed on to the :after block. It just tricks IE8 into getting min-height:100% correct.

    It will also force the wrapper to contain any child floats.

    Code CSS:
    /* CREATE BACKGROUND COLOR FOR COLUMNS */
    #one{
        clear: both;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 150px;
        background: yellow;
    }

    Apparently the clear: both has the same purpose here as it does on my columns above with Float: Left/Right and position: relative ????
    Actually the clear:both on that AP div is just to fix an IE bug.

    I'll take a break here where the bold red text begins and answer them in another post

  16. #16
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    *** Okay, here is where I am particularly confused... ***

    Your article mentions that we "attach" the absolute column to the bottom of our "containing block" (i.e. relative div) but here I see you using:

    position: absolute;
    top: 0;
    bottom: 0;

    You specifically said...
    This technique is based on the fact that if you place an absolute element inside a relative container and set the absolute element to height:100&#37; (or top:0 and bottom:0) it will expand in tune with the parent container...
    ...but I don't understand what this does and it seems contradictory when you mention height:100% (or top:0 and bottom:0)
    height:100% is not necessary when using top & bottom together. It is basically the same thing so there is no need to set the height.

    You then go on to say later in your article...
    Instead we are going to place the absolute element at the bottom of the relative parent and give it a height of 1000em. Now instead of the absolute element going down the page it starts at the bottom of our columns and travels up the page and out the top of the browser window.
    ...but I don't see that in the block of code above or anywhere?!

    (In my opinion) This needs to be re-written and explained better!
    The em height with bottom:0 is for IE6. That is done because IE6 does not understand top and bottom together on an AP element.


    Code CSS:
    #three{
        clear: both;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 150px;
        background: #D685AD;
    }

    More of the same, however, why are we NOT doing this for Column #2????


    How is it that Column #2 expands the full height of the browser window when it doesn't have its own absolute column to do a background color?!
    Column#2 gets it's BG color from the wrapper div so there is no need for a faux div to color it.

    Code CSS:
    /* IE6 FIX */
    * html #one,
    * html #three{
            height: 9999em;
            top: auto;
    }

    Maybe this has something to do with above, but if you could explain it in detail it would help me to know what purpose it serves and what it actually does?!
    Yes, I explained that above. It is for IE6, the height is set in em for an outrageous height and the top value is set to auto so it positions at bottom:0; instead. Good browsers get top:0; and bottom:0; then the top:0 gets canceled out for IE6 so it obeys bottom:0;

    WHEW!!! You made it!!

    Sorry for all of the questions, but this is actually trickier than it initially looks, and I am seriously about REALLY LEARNING this stuff, so your detailed responses are greatly appreciated!!!!
    Whew is right!
    Good questions though

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

    TomTees, I agree the original article could perhaps be updated but it is an old article and methods do get refined over years so there may be differences in the way we do things these days but the concept is the same.

    The basic concept is overlaying the absolute element to provide the colour. Good browsers IE7 and above can use top and bottom for the absolute element but IE6 needs a hack with the massive height and then hiding the overflow in some way (either by letting it shoot through the top of the browser or perhaps using overflow:hidden on the parent depending on situation).

    You have jumped in at the deep end though and the concepts you are trying to understand are not simple so it will take time for it to make sense

    If Ray has missed any questions or you need more clarification then just shout.

  18. #18
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi Tom,

    I'll try to answer some of these for you while Paul is offline.
    Thanks!!

    Does anyone use Opera?

    Does anyone use IE6 anymore?

    Does anyone use Safari?

    Code CSS:
    position: absolute;
    top: 0;
    bottom: 0;
    So this forces the Faux (Absolute) Columns to 100% height in the relative "Containing Block"??


    The em height with bottom:0 is for IE6. That is done because IE6 does not understand top and bottom together on an AP element.
    Code CSS:
    #three{
        clear: both;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 150px;
        background: #D685AD;
    }
    Code CSS:
    /* IE6 FIX */
    * html #one,
    * html #three{
            height: 9999em;
            top: auto;
    }
    So in the first block of code above, top: 0 and bottom: 0 make the absolute columns 100% height in the relative "containing block" columns??

    And in the second block of code above, the "star html hack" makes the top: 0 and the 9999em makes the absolute column sufficiently high rising up from the bottom of the window so that it always is there if the text expands downwards?


    Column#2 gets it's BG color from the wrapper div so there is no need for a faux div to color it.
    But could you mimic what we did in column #1 and #3 if you wanted to?


    Whew is right!
    Good questions though


    Well, thanks for taking the time to help out!!


    TomTees

  19. #19
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Thanks Ray

    TomTees, I agree the original article could perhaps be updated but it is an old article and methods do get refined over years so there may be differences in the way we do things these days but the concept is the same.
    I was just saying.


    The basic concept is overlaying the absolute element to provide the colour. Good browsers IE7 and above can use top and bottom for the absolute element but IE6 needs a hack with the massive height and then hiding the overflow in some way (either by letting it shoot through the top of the browser or perhaps using overflow:hidden on the parent depending on situation).
    I *think* I've got that know thanks to Rayzor's re-explanation, but it'll have to settle a bit in my brain!


    You have jumped in at the deep end though and the concepts you are trying to understand are not simple so it will take time for it to make sense


    If you're going to drown, I say jump off the deep end and get it over with!!!


    If Ray has missed any questions or you need more clarification then just shout.
    I basically good for now, and have a really sharp looking start for my Home Page.

    (I'll nit-pick in a follow-up post.)


    TomTees

  20. #20
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O',

    Just some academic follow-up questions before I forget...

    1.) My approach was to have...

    Code HTML4Strict:
    	<body>
    		<div id="wrapperMinusFooter">
    			<div id="header"></div>
    			<div id="col1">COL1</div>
    			<div id="col2">MAIN</div>
    			<div id="col3">COL3</div>
     
    			<div id="one"></div>
    			<div id="three"></div>
    		</div>
    		<div id="footer">FOOTER</div>
    	</body>

    but your approach was to add an extra layer as such...

    Code CSS:
    <body>  
    	<div id="wrapper">
    		<div id="header"></div>
    		<div id="inner">
    			<div id="left"></div>
    			<div id="right"></div>
    			<div id="main"></div>          
    		</div>
    		<div id="faux-lt"></div>
    		<div id="faux-rt"></div>
    	</div>
    	<div id="footer"></div>
    </body>

    Why do you add this extra layer? (My code seems to work just as well as yours did.)


    2.) In the example you gave me at this link...

    http://www.pmob.co.uk/temp/3col-stic...r-min-max2.htm

    I had a *really* hard time following your code - especially when it came to the absolute "faux" columns.

    (And this is where I was being bold and felt your code and examples could be cleaned up a lot.)

    My code and screenshots above seem to accomplish everything you were teaching me, but I felt like the final version of my code was much more streamlined and thus easier to follow, and yet it yielded the same end results.

    If I am missing something between my example and your example, please correct me.

    Here are some snippets of your code from the link above...

    ***Oops, it looks like you may have already edited your code from what I was going off of the other day, so my comments may be moot?! **


    One of the code examples I was going off of the other day had all of these funky "absolute coordinates"...

    You had Faux Column #1 with Left: 0, and then Faux Column #2 at like Left: 122 and then Faux Column #3 at like Left: 343 and it went against the logic of the absolute columns being "contained" in a relative column. It was almost as if the Faux Colored Columns were being absolutely placed on the screen??

    Not sure if you follow me, but I was very confused by the CSS in some example I had been looking at.

    Your code at the link above looks cleaner and I know my code - with Razur's and your help - looks much much easier to follow than other examples on the Internet.

    So that was another "beef" that I had for what it is worth?!

    My head hurts!!!!

    I think I've had enough for tonight!!

    Thanks for all of your help!!!!



    TomTees

  21. #21
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TomTees View Post
    Thanks!!

    Does anyone use Opera?

    Does anyone use IE6 anymore?

    Does anyone use Safari?
    Yes there are a few Opera users running around. I don't know what the stats are but I would say the majority of Opera users are web dev folks.

    IE6 is on a decline thank goodness but it is having a slow death. From what I have heard most IE6 users are govt. institutions or businesses on an intranet that has not been upgraded. Such as libraries, schools etc.

    There again I don't know what the stats are but a lot of Mac users are using Safari. The Windows Safari version was around before Chrome (they both use Webkit engines) was and it allowed window users to get a glimpse of what their page might look like on Safari Mac.

    There are a lot of Chrome users out there though. Webkit has very few bugs so as long as you are writing valid code you should not have any major problems with Safari and Chrome.

    position: absolute;
    top: 0;
    bottom: 0;

    So this forces the Faux (Absolute) Columns to 100% height in the relative "Containing Block"??
    Yes, only for modern browsers and IE7. I don't consider IE7 a modern browser bit it does work there. IE6 and under will choke on it.


    And in the second block of code above, the "star html hack" makes the top: 0 and the 9999em makes the absolute column sufficiently high rising up from the bottom of the window so that it always is there if the text expands downwards?
    No, it does not set it at top:0 The top:auto; overrides and negates top:0 for IE6. It is kinda like saying "none" with a border or background that was defined earlier in the cascade. It's just an override.

    IE6 is getting bottom:0, it sets the faux column at the bottom of the wrapper div and extends way beyond the top of the viewport.

    Quote Originally Posted by Rayzur View Post
    Yes, I explained that above. It is for IE6, the height is set in em for an outrageous height and the top value is set to auto so it positions at bottom:0; instead. Good browsers get top:0; and bottom:0; then the top:0 gets canceled out for IE6 so it obeys bottom:0;
    But could you mimic what we did in column #1 and #3 if you wanted to?
    Yes, it can be used as many times as you want but your goal is to only use it when needed. The wrapper is capable of giving a BG color to the center column so it is the best way to go.

    Here is an old demo of Five Equal AP Faux Columns , the last (5th) column gets it's BG color from the wrapper.


    Well, thanks for taking the time to help out!!
    Glad you found it helpful!

  22. #22
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I don't know what the stats are but I would say the majority of Opera users are web dev folks.
    If you are targetting Russia and former soviet states, Opera is just under 40%
    If you're talking mobile though then you are talking about most of the world that's not Europe or North America. Opera Mini on Nokias seem to be the most-used combination (in one form or another) worldwide.

    Safari/Chrome/webkit is big on phones in Europe and North America. The difference there is unlike much of the rest of the world, Europe and NA have computer users more than mobile users... everywhere else it's often the other way around (mobile users who may not even have a computer).

    I remember crusty saying something about IE6 is the default browser on phones running WindowsCE since about 2 years ago... that's pretty recent compared to the age of IE6. Bleh.

  23. #23
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    As an Opera user, yeah, we're around. Most useful browser out of box and I think it's more expandable than even the browsers that allow plugins -- at least when it comes to useful stuff. You couldn't pay me to use firefox as my primary daily use browser given what a buggy unstable CPU chewing train-wreck it is, hence my restricting it to just testing for page compatibility ... and chrome doesn't do anything useful for me even WITH extensions.

    Quote Originally Posted by Stomme poes View Post
    I remember crusty saying something about IE6 is the default browser on phones running WindowsCE since about 2 years ago... that's pretty recent compared to the age of IE6. Bleh.
    WinCE/Win Mobile since version 6 has been IE6, so IE6 is 'new' to windows mobile for only two years. Prior to two years ago every WinCE/Mobile device was STILL RUNNING IE 5.5!

    This is just part of why I still code so that the pages at least work in 5.5, and behave properly in IE6. The other part being at this point it takes little or no effort to support either of them if you follow a few basic rules.

    Those rules being:

    1) If a element's children have positioning on them, trip haslayout on that parent.

    2) NEVER declare width and height the same time as padding or border on the same dimension.

    3) Use * html and expressions sparingly. The only legitimate need for either of those should be in implementing the bits of CSS 2.1 that are missing from IE6; specifically min/max-width/height... and, uhm... yeah. That's really it for the list. Likewise for behavior files on things like :hover anywhere and, uhm... yeah.

    4) If you find yourself needing to hack for every browser or multiple versions of newer IE (IE7/IE8) your code is fundamentally flawed, try to find another way of coding it or rethink your layout as non-viable.

    5) Just because you can draw it in your goof assed paint program doesn't make it a viable layout concept. IF you are DUMB ENOUGH to be starting from a PSD, be ready to throw out large sections of the design as bad ideas made by people who know jack about accessibility, standards or coding. This is why the artsy type should be the last person in the process, NOT the first - and should be prepared to be told "NO" on a lot of their non-viable for web/screen deployment 'ideas'

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    <body>
    <div id="wrapper">
    <div id="header"></div>
    <div id="inner">
    <div id="left"></div>
    <div id="right"></div>
    <div id="main"></div>
    </div>
    <div id="faux-lt"></div>
    <div id="faux-rt"></div>
    </div>
    <div id="footer"></div>
    </body>


    Why do you add this extra layer? (My code seems to work just as well as yours did.)
    I use a wrapper there to hold the three column and provide some structure to the page. It is not really necessary but allows me the option to add extra styling to that section and to be able to target that section only with the css.

    However, it does have another (safety-net) use and that would be if you had floated elements in the header or at least above the columns then your first floated column may snag on the float above and not move to the far left and thus push all other floats out of kilter.

    When I want to be sure that a sequence of floats start on the next line I wrap them all in a container and set that container to clear:both and then I know there will be no snagging above if someone later changes the code in the header.

    You may think that you could just set the first float to clear:both but that would only make the first float not snag but the subsequent floats would still snag. You can't set all floats to clear both because then they would clear each other and be just one big long column.

    I like pages ot have structure and I would have a header section for logo and navigation and banners etc.

    Then a main section which would contain the columns and content and sidebars. lastly followed by a footer section. This adds structure to the page and allows you to target these separate sections via their parent id or class.

    For example you may want the text in all three columns to be font-size:120&#37; and if you didn't have a wrapper around all three columns you would need to set that size three times. However with a wrapper around the columns you could just say .mainsection p{font-size:120%}

    So, in essence your are correct that we don't add divs where none are needed but at the same time we try to keep a usable structure that makes maintenance easier.

  25. #25
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Okay, I was just being sure.

    Your reasoning makes sense. (I am all for "compartmentalization"!)

    I would be more interested in hearing a response on Question #2 above, though.


    TomTees


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
  •