0

I was looking for a sticky footer with a full height sidebar solution and partially found it here:

yet another HTML/CSS layout challenge - full height sidebar with sticky footer

The post marked as the correct answer explains a neat solution, but I was wondering whether it's possible to turn that fluid content div in a fixed one, same with the footer. (By fixed i mean fixed width).

The content div and footer should cover the entire visible width of the screen, and when resized, they should not resize with the window. They should stay the same and have a scrollbar appear instead.

Also, another particular thing I'm after is to have the sidebar with some additional left-margin. Here's the fiddle:

http://jsfiddle.net/2NbMg/

<div id="wrapper">
            <div id="content">
                <div id="sidebar">Sidebar<br/>Sidebar<br/>Sidebar<br/></div>
                <div id="main">
            Content
                </div>
            </div>
            <div class="push"></div>
        </div>
<div id="footer"><div id="footer-content">Footer</div></div>

(the CSS can be found on fiddle in order to keep this post uncluttered).

Oh, and if there is a way to make the content span from the right of the sidebar, not from the the window, it would be awesome!

I've been searching and trying to achieve this for two days with no success. I'd really appreciate if someone could help..

Later edit @toninoj:

Thanks again for the input and I apologize for not being so explicit. Basically, I want the footer to take full width especially on widescreens and laptops. The reason why I would like to stay away from 100% width is that I want my footer to still be large when the window is resized (made smaller), not adjust itself on resize or according to the window's size. The footer will have some serious amount of data contained within it, and it would look bad on resize.

I could throw in a high amount of pixels in order to keep its width fixed, but wouldn't that create problems on laptops, for example? (scrollbar appearing although not necessary)

Community
  • 1
  • 1
Zubzob
  • 2,653
  • 4
  • 29
  • 44
  • Possible duplicate? http://stackoverflow.com/questions/13385050/sticky-footer-on-100-height-left-menu – Shauna Nov 14 '12 at 19:53

1 Answers1

0

You need to specify exact width of an element, e.g. width:200px; and you should give it position:fixed to make it sticky. also you should give it overflow:scroll;

If you want a fixed width footer without a scrollbar, you just specify something like 

width:1600px;
overflow:hidden;
tonino.j
  • 3,837
  • 28
  • 27
  • Hey, I guess I found a workaraound for the content width and its positioning. My only problem is now to make the footer take the width of the screen (onload) without giving it fixed position. – Zubzob Nov 14 '12 at 19:27
  • What do you mean? If you want that, you just give the footer width:100%; property. – tonino.j Nov 14 '12 at 19:29
  • Hey, I updated my initial post because I couldn't post it here due to length restrictions :) – Zubzob Nov 14 '12 at 19:45
  • I added the answer for that also. – tonino.j Nov 14 '12 at 19:50
  • Hey, thanks again. Tried it but it wouldn't solve it (i'd have to overflow hide the body and html in order to make the scrollbar disappear. Then again, user would be able to scroll freely with a 'scroll click'). If you look at the fiddle, it resizes well when I scroll out (increased resolution). The problem is when I scroll in and then drag the horizontal scrollbar to the right. The footer is not covering the page entirely.. – Zubzob Nov 14 '12 at 20:02