CODEWITHSUNDEEP
htmlcss
TNK
TNK

Reputation: 4323

How to use CSS position correctly?

I have a 3 DIVs like this 

<div class="green">
  <div class="red">
    <div>......</div>
    <div class="yellow">......</div>
  </div>
</div>

Using this structure, I want to have an output similar to this:

enter image description here

Green DIV have set to its width 100% and red DIV have a fixed width and set to center of the page. So my problem is I want to get my yellow DIV to red DIV having align to right of the red DIV. 

.red {
   position: relative;
}

.yellow {
   position: absolute;
   top: 0;
   right: 20px;
}

But it’s not my desired output.

Upvotes: 1

Views: 88

Answers (5)

Dominik Schmidt
Dominik Schmidt

Reputation: 557

Just put the yellow div into the red div in HTML and then set it to float: right;

Upvotes: 1

mohamedrias
mohamedrias

Reputation: 18566

I have tested this DEMO

Adjust the height and width as per your page.

enter image description here

    .red {
   position: relative;
   width: 60%;
   margin-right: auto;
   margin-left: auto;
   height: 100%;
   background: red;

}

.yellow {
   position: absolute;
   right: 0;
   background: yellow;
   top: 20;
   height: 80%;
   width: 60%;
}


.green {
  width: 100%;
  background: green;
  padding-top: 20px;
  height: 200px;

}

Upvotes: 1

Magna
Magna

Reputation: 618

here is a fiddle, http://jsfiddle.net/P77RB/ you can play with the width and height to accommodate your needs. 

<div class="green">
<div class="red">
    <div class="yellow">
    </div>
</div>


.green{
width:500px;
height:300px;
background:green;
display:table;
 }
 .red{
width:80%;
height:270px;
margin:30px auto 0px auto;
background:red;
position:relative;
}
.yellow{
position:absolute;
background:yellow;
width:200px;
height:100px;
right:0;
top:50%;
margin-top:-40px;
}

Upvotes: 3

Dekel Maman
Dekel Maman

Reputation: 2097

Have you tried this?

.yellow {
  float: right;
  position: relative;
}

Upvotes: 2

Iqbal Kabir
Iqbal Kabir

Reputation: 1610

You have to use right: 0;

.yellow {
   position: absolute;
   top: 0;
   right: 0;
}

Upvotes: 1

Related Questions