Question

I want to achieve following layout:

with following code:

<div class="m">
    <div class="l"></div>
    <div class="r">
        <div class="r1"></div>
        <div class="r2"></div>
    </div>
</div>

My CSS look like this:

div.m{
    ...
    width: 100%;
}
div.m div.l{
    float: left;
    ...
}
div.m div.r{
    float: right;
    ...
}
div.mainMenu div.r1{
    position: relative;
    right: 0px;
    ...
}
div.mainMenu div.r2{
    position: relative;
    right: 65px;
    ...
}

which results to:

What am I doing wrong?
Any help would be appreciated.

Answer 1

Try using position: relative on r and change to position: absolute on r1 and r2, leaving top: 0 on both.

Ba careful, in this way the content r will be extended below r1 and r2. If this is a problem, to avoid this, play with r padding-right.