Grow your CSS skills. Land your dream job.

2 100% columms + sticky footer

  • # April 20, 2013 at 2:53 pm

    To have the drop down work in my version, add z-index: 1; to nav ul ul {} and add margin: 0; to nav ul {}

    To have the content and sidebar appear to be full height in the first example, remove the background from .sitecontent and place it on the .wrapper like this:

    background: #F0EFE2 url(“images/content.png”) repeat-y center top;

    as to which one works best, it depends on what you want. I think the first version is much more commonplace. My version was only fitting your original request – I think an end user is more accustomed to scrolling the entire page than just the content…

    # April 21, 2013 at 2:51 pm

    I will use the second one then ..

    The way you say dont work, because like that all will be grey.

    And i want the wrapper to be grey, like it is, and the site content ( content and sidebar ) to be white, like in the example, but i want the white to go down to the footer, so when the content is less, the white dont stay like this:

    http://www.testeeee.cixx6.com/site/

    # April 21, 2013 at 7:28 pm

    what doesn’t work? please be more specific. If you mean the corrections I suggested for the first version – I can assure you that they do work. The color would be applied to the entire wrapper, and the image (white with shadow borders) will flow down the middle.

    # April 22, 2013 at 8:07 am

    So i’ve tried what you said, and it went wrong..

    What i want is this:

    http://i.imgur.com/zEWOnFa.jpg

    A 100% site content (content and sidebar), that come to the bottom, even if there is no text to fill it.

    And what i have is this:

    http://www.testeeee.cixx6.com/site/

    And thanks for the help, you are awesome :D

    # April 22, 2013 at 8:22 am

    Hi, it works with: height:100% in #site_content and remove height:auto in wrapper.

    # April 22, 2013 at 8:36 am

    > To have the content and sidebar appear to be full height in the first example, remove the background from .sitecontent and place it on the .wrapper like this:

    > background: #F0EFE2 url(“images/content.png”) repeat-y center top;

    # April 22, 2013 at 10:21 am

    wolf, but the content.png is white, because its the white part of the site ( the site content)

    And the wrapper is all that is outside of the header. So if i do what you say, i will get all the wrapper white, instead of grey color i have outside of the site content.

    # April 22, 2013 at 10:58 am

    rodolpheb

    it worked like i want, and i really like! but then i scroll down and see what happens:

    http://codepen.io/anon/pen/bzxsE

    now i got white part after footer, and footer is not sticky anymore.

    # April 22, 2013 at 11:50 am

    Ok, try this : set to the #site_content –> height: calc(100% – 220px); (don’t forget to prefix and choose the right value instead of 220px)

    [codepen](http://codepen.io/rodolpheb/pen/gwHzE “codepen”)

    # April 22, 2013 at 12:09 pm

    @austinnnnn, did you at least try my suggestion? I have tested it and it works. I do know a thing or two about css ;)

    The wrapper encompasses the whole viewport due to the min-height: 100%, along with the 100% height on html and body. The background declaration I gave will cover the entire viewport with the #F0EFE2 color – then it will apply the white image down the center, from top to bottom. The header’s background will cover the wrapper’s. The site_content will have no background, but will appear to have the white background and will appear to run from top to bottom. And again the footer’s background will cover that of the wrapper.

    # April 22, 2013 at 12:24 pm

    Worked now! Many thanks to you, really! :D

    Dont know what was i doing bad before! Now another question, is it easy to put the header visible when i scroll down? I mean a persistent header. Because duo what site will do, its better to have the menu persistant

    # April 22, 2013 at 2:39 pm

    It’s not difficult – you could set the header to position: fixed and add top padding to the content so that it starts below the header.

    Whether to implement a persistent header is completely up to you. I will say that most new developers wish to do this (and to the footer as well), cutting the content to a small section in between the two. In reality, the header is not as important as first thought and the idea is usually (but not always) abandoned.

    # April 22, 2013 at 5:32 pm

    so you say that i should put the header fixed ?

    and the footer? fixed? or should i keep the sticky footer?

    # April 22, 2013 at 7:42 pm

    No, I’m saying to build it the way you and the client want (which may be fixed).

    # April 22, 2013 at 8:10 pm

    but only the header fixed? and leave the footer like it is?

Viewing 15 posts - 16 through 30 (of 33 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".