Question

I want to move a right menu to the left side, the problem is that I cant rearrange all the html, I have to do this with CSS. The HTML template looks like this:

<style type="text/css">
#all{background:gray;width:400px}
#content{
 background:yellow;width:300px;
 position:absolute;
 margin-left:100px;
 float:left;
}
#menu{background:red;width:100px}
#footer{background:green}
</style>

<div id="all">
    <div id="content">
    Content<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>

    <div id="menu">
    Menu<br/>Menu<br/>Menu<br/>Menu<br/>Menu<br/>Menu<br/>
    </div>

    <div id="footer">
    Footer
    </div>
</div>

It works… BUT if the content is longer (height) than the menu, it goes over the footer.

I want to set the footer on the bottom, it should “attach” to the #menu and #content.
I could solve this problem by rearranging the html inside the template, to move the menu to the top, (and tweak some css) but I cant change the html.

thanks for any ideas 🙂

Answer 1

Not entirely sure what you need here (your phrasing is a bit weird, what’s “attach”?), but the most commonly used method is simply to float them to whichever side you need, like this:

#all{
    background: gray;
    width:400px;
}
#content{
    background:yellow;
    width:300px;
    float: right;
}
#menu{
    background:red;
    width:100px;
    float: left;
}
#footer{
    background:green;
    clear: both;
}

See: http://www.jsfiddle.net/yijiang/4Rxky/