2

I'm making a liquid page, and I have an horizontal menubar (ul) absolute positioned to bottom (sticky footer).

Expected behaviour

No problem with this stuff, but when I resize the browser, obviously the inner elements in the menu stacked upwards each other, making the menu too high and overlapping the main content.

The problem with the overlap

Is there any way to (any of the following)

  • make the absolute postioned menu grow "downwards"?
  • or to setting the edge that aligns to the bottom in a certain high (to make it grow from that point to bottom)?
  • or give layout to the menu making it to push the above elements (I've tried playing with overflow but doesn't work for me)?

That's the html:

<div class="container">
    <div class="izda">
        Foo
    </div>
    <div class="dcha">
        <p>Lorem ipsum dolor</p>
        <p>Lorem ipsum dolor</p>
        <p>Lorem ipsum dolor</p>

        <p>Lorem ipsum dolor LAST</p>
        <ul>
            <li>Item</li>
            <li>Another</li>
            <li>More</li>
            <li>Item</li>
        </ul>
    </div>
</div>

And the css:

.container {position:relative}
.izda {background:red;
       height:20em; 
       display:inline-block; 
       width:20%; 
       vertical-align:top;
}
.dcha {background:gold; 
       display:inline-block; 
       width:78%; 
       margin-bottom:3em;
}
ul {position:absolute;
    bottom:0;
    background:pink;
    margin:0;
    padding:0;
    max-width:100%;
}
ul li {float:left; 
       list-style:none;
       border:1px solid black;
       margin:0 1em;
       padding:1em;
}

A working example here: http://jsfiddle.net/KQhLs/2/

If you write more paragraphs, the menu go down properly thanks to the margin bottom of his father.

Sticky footer properly push down

But when resizing the frame you can see the overlapping effect.

Thanks in advance. The web are supposed to work only in modern browsers and, if possible, with pure css (no JS).

EDIT: I think the wind is blowing these ways: How to avoid fixed element from hovering page contents? To end at this: Sticky Footer for Responsive Site

But there's no useful answers...

Well, in fact I can prevent this behavior with mediaqueries, that's simple. But I'd like to know if it's there a "one for all" solution.

EDIT2: I have just read A list apart - Exploring footers. Aside JS solutions I tried all, but the problem stills here - if you put floating elements inside the footer, it overlaps the main content.

Also, I have read CSS Sticky Footer and it seems it have same problem.

I can't figure that this is impossible to achieve with pure css... should I give up?

Community
  • 1
  • 1
Arkana
  • 2,831
  • 20
  • 35

2 Answers2

1

make the absolute postioned menu grow "downwards"?

On your <ul> footer element, replace bottom:0 with top: 83%

Or if you want to control it pixelwise, replace bottom:0 with top: 100%; margin-top: -54px;

sphair
  • 1,674
  • 15
  • 29
  • Thanks for your answer. I'm trying to avoid pixel units, because the web is supossed to be liquid. Your solution efecctively do the trick in this concrete example, but is not good enough because if the second column grows, the footer is not sticking at the bottom anymore. There's a [fiddle](http://jsfiddle.net/KQhLs/7/) implementing your suggestion. – Arkana Apr 18 '13 at 09:01
  • Ok, so the percentage was a hack I agree. The second solution with the pixel margin works fine in your example if you want the footer to be at the bottom of the page and grow downwards (is this what you want, or should it be fixed on the screen bottom?), but if you want to avoid using pixels to define the height of that footer I'm out of options :) – sphair Apr 18 '13 at 09:07
  • What about using position: fixed? – sphair Apr 18 '13 at 09:18
  • Well... `position:fixed` will make the footer always overlap the content. But the [second solution](http://jsfiddle.net/KQhLs/9/) I think fit enough with my client requirements. It uses px unit, but the behaviour is the expected. Thanks for your effort and for the solution! – Arkana Apr 18 '13 at 09:58
-1

make sure your wrapper/container is relative. Underneath it place your footer as relative and add top:100%

DiederikEEn
  • 753
  • 8
  • 17
  • If you see the fiddle, the container is relative yet... and place the sticky footer under the container not do the trick, if I understand you. [(Fiddle)](http://jsfiddle.net/KQhLs/4/) – Arkana Apr 17 '13 at 14:36