Grow your CSS skills. Land your dream job.

2 100% columms + sticky footer

  • # April 8, 2013 at 5:34 pm

    So im doing an website, here it is:

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

    And i cant put the site_content, and the content and sidebar (this 2 are inside site_contente) 100% height.

    Basically i want the content and the sidebar to be 100% no matter what. And when the content on content div is more than 100%, i want it to scroll, i mean, only scroll on content scroll.

    Example of what i want:

    http://i.stack.imgur.com/i2rid.jpg

    # April 8, 2013 at 5:35 pm

    * {margin:0;
    padding:0;
    }

    html, body {height: 100%;
    font: normal .80em ‘trebuchet ms’, arial, sans-serif;
    background: #F0EFE2;
    }

    p
    {
    padding: 0 0 20px 0;
    line-height: 1.7em;
    color: #666;
    }

    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -30px; /* the bottom margin is the negative value of the footer’s height */
    }
    .footer, .push {
    height: 30px; /* .push must be the same height as .footer */
    clear: both;
    }

    h1, h2, h3, h4, h5, h6
    { font: normal 175% ‘century gothic’, arial, sans-serif;
    color: #43423F;
    margin: 0 0 15px 0;
    padding: 15px 0 5px 0;}

    a, a:hover
    { outline: none;
    text-decoration: underline;
    color: #A4AA04;}

    a:hover
    { text-decoration: none;}

    .left
    { float: left;
    width: auto;
    margin-right: 10px;}

    .right
    { float: right;
    width: auto;
    margin-left: 10px;}

    .center
    { display: block;
    text-align: center;
    margin: 20px auto;}

    blockquote
    { margin: 20px 0;
    padding: 10px 20px 0 20px;
    border: 1px solid #E5E5DB;
    background: #FFF;}

    ul
    { padding: 2px 0 22px 17px;}

    ul li
    { list-style-type: circle;
    padding: 0 0 4px 5px;}

    ol
    { padding: 8px 0 22px 20px;}

    ol li
    { padding: 0 0 11px 0;}

    #logo, #menubar
    {
    margin-left: auto;
    margin-right: auto;
    }

    #main
    {
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    padding-bottom: 30px;
    color: #000;
    }

    #header
    {
    height: 150px;
    background-color: #708B1A;
    }

    #logo
    {
    width: 877px;
    position: relative;
    height: 100px;
    background-color: #003;
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
    }

    #menubar
    { width: 877px;
    height: 50px;
    padding: 0;
    background: #29415D url(images/menu.png) repeat-x;}

    ul#menu, ul#menu li
    { float: left;
    margin: 0;
    padding: 0;}

    ul#menu li
    { list-style: none;}

    ul#menu li a
    { letter-spacing: 0.1em;
    font: normal 100% ‘lucida sans unicode’, arial, sans-serif;
    display: block;
    float: left;
    height: 24px;
    padding: 20px 26px 6px 26px;
    text-align: center;
    color: #FFF;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;}

    ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
    { color: #FFF;
    background: #1C2C3E url(images/menu_select.png) repeat-x;}

    #content
    { text-align: left;
    width: 595px;
    min-height: 100%;
    }

    #site_content
    { width: 837px;
    overflow: hidden;
    color #000;
    height: 100%;
    margin: 0 auto 0 auto;
    padding: 20px 24px 20px 37px;
    background: #FFF url(images/content.png) repeat-y;}

    .sidebar
    {
    float: right;
    width: 200px;
    padding-top: 0;
    padding-right: 15px;
    padding-bottom: 30px;
    padding-left: 15px;
    min-height:100%;

    }

    #footer
    { width: 878px;
    font: normal 100% ‘lucida sans unicode’, arial, sans-serif;
    height: 30px;
    text-align: center;
    margin: 0 auto 0 auto;
    background: #29425E url(images/footer.png) repeat-x;
    color: #FFF;
    }

    # April 8, 2013 at 5:36 pm

    if you want to see html too say

    # April 9, 2013 at 4:20 am

    You can do it with absolute positioning easily, I hope some one comes up with a better way:

    #main {
    width: 900px;
    }
    #site_content {
    position: absolute;
    top: 150px;
    bottom: 30px;
    height: auto; /* just remove the 100% height */
    }

    Then you just need to make the main column scrollable.

    # April 9, 2013 at 5:29 am

    From the image you supplied, I don’t think you can do this easily.

    A sticky footer will always be at the bottom of the page **regardless** of how much content is in the ‘content’ area but will be off the page if the content is longer that the viewport height.

    But if the content is longer than the page you want a scroll which means that the footer would always be there…that’s not a sticky footer…that’s a page with a set height with a content div set to scroll overflow…isn’t it?

    Or am I missing something?

    # April 9, 2013 at 5:35 am

    i’ve tried so many ways, and i dont really know how to do it..

    i want like a page static. so the only div that will scroll is the content. the only page that will have content will be the content. and because i want the footer sticky, i mean in diferent resolutions, i want the header on thwe top, the side bar on the right, and the footer on the bottom, so when the content on content div is more, the content div scroll.. is this possibile to do? should i use fixed position for footer? so it will be always at bottom of the browser and not at the bottom of the page?

    # April 9, 2013 at 6:16 am

    The problem is that you won’t necessarily know the height of the viewport.

    Certainly you can fix the position of the footer with fixed positioning but unless you know the height of the viewport you can’t set a height of the content div to ensure that it overflows as you want.

    I feel a javascript solution coming on or, worst case, a whole lotta absolute positioning.

    **Anyone, could we overflow scroll the content div but hide any page overflow and still have a fixed position footer?**

    Frankly, I would just lose the scrolling content because I hate scrolling divs inside a page. I believe that users prefer to scroll pages rather than divs…but that’s a personal choice / belief.

    # April 9, 2013 at 6:21 am

    so and if i put the scroll on the page, i will just have to put the sticky footer, and then the page will scroll until no content, right? problem is that i cant put the content and the sidebar 100%, so when there is no conent, the content and sidebar(white part) still go down until the bottom

    # April 9, 2013 at 6:27 am

    i can give you the css and html if you want to. so i will follow your advice, and put all the page with scroll, but still 100% content and sidebar. and my content will have list’s, that will be taked from a database. so i think the best way to dont put the page to big in height, i can make like pages. i mean: 10 items per page, then go to page 2. its the ebst way, right?

    # April 10, 2013 at 5:53 am

    I really need your help. So now i dont have the scroll on content. I will follow your advice, and put the scroll on all page. I have a sticky footer, the is outside of the wrapp div. And inside of the wrapp, i have the site content(the white part) and then inside of it i have content and sidebar. But now i cant put the site_content (content and sidebar) at 100% :/

    I really need help.

    here is my current code:

    HTML:

    http://pastebin.ca/2354549

    [MOD EDIT] CSS now in Codepen

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

    # April 15, 2013 at 12:02 pm

    Nice.

    # April 16, 2013 at 4:03 pm

    how have you done that? :o

    # April 16, 2013 at 10:26 pm

    click the ‘edit this pen’ at the bottom left of the page and you can see all the html and css

    # April 20, 2013 at 1:44 pm

    Thank you!

    So now i got 2 “ideias”:

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

    I got this one, that have the normal scroll, and the all page scrolls. But i cant put the content and sidebar on 100%. As you can see, the white part fits with the text.

    And i got this one (yours):

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

    That have the scroll only on content, but now i cant use the dropdown menu that i’ve created. I dont know why.

    And i want to know what do you think that work best. Which one of them should i chose?

Viewing 15 posts - 1 through 15 (of 33 total)

You must be logged in to reply to this topic.

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