Question

I haven’t developed much in HTML/CSS in some time and was looking at some old code and came across the following:
CSS:

#menu{
float: right;
height: 80%;
vertical-align: bottom;
}

.filler{
float: right;
height: 50%;
}

p.clear{clear: both; height: 0; margin: 0; padding: 0;}

HTML:

<div class="filler">
    <p class="clear"></p>
</div>
<div id="menu">
    <p class="clear"></p>
</div>

These div classes are nested inside a banner div and lie in the top right corner of the screen. Without the <div class="filler"> the menu div no longer lies within the banner div, nor at the top right of the screen. What is going on? I want to design a webpage with as little nested divs as possible. Is there a way to accomplish this same functionality without having a div that contains nothing but height?

Answer 1

I think the old trick here is on the p.clear having 0 height. I kinda see whats going on tho you’re excluding alot of variables. Anyway. If you want a prematop right menu you could try something like :

#menu{
    position: fixed;
    top: 1em;
    right: 1em;
}​