Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › 2 100% columms + sticky footer

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 33 total)
1 2 3
  • Author
    Posts
  • April 8, 2013 at 5:34 pm #43969
    austinnnnn
    Participant

    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 #131060
    austinnnnn
    Participant

    * {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 #131061
    austinnnnn
    Participant

    if you want to see html too say

    April 9, 2013 at 4:20 am #131099
    CrocoDillon
    Participant

    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 #131108
    Paulie_D
    Member

    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 #131109
    austinnnnn
    Participant

    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 #131112
    Paulie_D
    Member

    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 #131111
    austinnnnn
    Participant

    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 #131113
    austinnnnn
    Participant

    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 #131226
    austinnnnn
    Participant

    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 11:52 am #131858
    wolfcry911
    Participant

    http://codepen.io/wolfcry911/full/jCLuy

    April 15, 2013 at 12:02 pm #131859
    Paulie_D
    Member

    Nice.

    April 16, 2013 at 4:03 pm #131993
    austinnnnn
    Participant

    how have you done that? :o

    April 16, 2013 at 10:26 pm #132032
    wolfcry911
    Participant

    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 #132522
    austinnnnn
    Participant

    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?

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 33 total)
1 2 3
  • The forum ‘CSS’ is closed to new topics and replies.