CODEWITHSUNDEEP
csshtml
LihO
LihO

Reputation: 42083

div layout with float property

I want to achieve following layout: enter image description here

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:

enter image description here

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

Upvotes: 2

Views: 2128

Answers (5)

Alex
Alex

Reputation: 6406

You have to set position:absolute; top:0px; for r1 and r2. http://jsfiddle.net/Zdkdp/2/

div{
    height:100px;
}
div.m{
    border:1px solid black;
    width: 100%;
}
div.r{
    position:relative;
    border:1px solid blue;
    width:33%;
}
div.r1, div.r2{
    border:1px solid red;
}
div.l{
    float: left;
    border:1px solid green;
    width:33%;
}
div.r{
    float: right;
}
div.r2{
    position:absolute;
    right:65px;
    top:0px;
}
div.r1{
    position:absolute;
    width:60px;
    right:0px;
    top:0px;

}

Upvotes: 1

Jeroen
Jeroen

Reputation: 63719

Based on your original code, I made this jsfiddle that achieves the layout you've drawn.

The borders and colors in that fiddle are for demonstration purposes, of course.

The resulting html:

<div class="m">
    <div class="l">Left</div>
    <div class="r">Right
        <div class="r1">R1</div>
        <div class="r2">R2</div>
    </div>
    <div class="clearfix"></div>
</div>

The clearfix div is there so you won't have to give a specific height to the things above it, making sure m has the correct height no matter what.

And the CSS:

div.m {
    border: 2px solid gray;
    width: 100%;
}
div.m div.l{
    border: 2px solid green;
    float: left;
}
div.m div.r {
    border: 2px solid blue;
    float: right;
    display: inline-block;
}
div.r1, div.r2 {
    border: 2px solid red;
    display: inline-block;
}
div.clearfix {
    clear: both;
}

Upvotes: 0

lorenzo-s
lorenzo-s

Reputation: 17010

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.

Upvotes: 1

T. Junghans
T. Junghans

Reputation: 11683

You're not doing anything wrong and the position of .r2 is to be expected. You need to set a negative top value for .r2. The negative top value is equal the height of .r1. So if .r1 { height: 50px;} then .r2 { top: -50px; }. Another option would be to float .r1 and .r2 instead of positioning them.

Upvotes: 0

Fareesh Vijayarangam
Fareesh Vijayarangam

Reputation: 5052

Does this work for you?

http://jsfiddle.net/xn8Ks/

Upvotes: 1

Related Questions