css fixed position on top within wrapper?

Question

I have a #wrapper { margin: 0 auto } centered in the middle. I want to align a div.version inside of that wrapper at the top right corner (of this wrapper). So the .version div should still be inside of the #wrapper.

Which position value do I have to use here?

Sarfraz · Accepted Answer · 2011-01-31 13:21:33Z

3

You can make use of absolute and relative positioning for your divs like this:

#wrapper {
 margin: 0 auto;
 position:relative;
 width:400px;
 background:green;
 clear:both;
 overflow:auto;
 height:100px;
}

.version {
  position:absolute;
  top:0;
  right:0;
  background:blue;
  height:100px;
  width:50px;
}

Check out the DEMO

So, to make an element appear inside another element, you should give parent a position set to relative while any child element a position of absolute :)

Check out the nice article written on the subject at css-tricks.com:

Absolute Positioning Inside Relative Positioning

enter image description here

edited Jan 31, 2011 at 13:21

answered Jan 31, 2011 at 13:16

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

css fixed position on top within wrapper?

1 Answer 1

Check out the DEMO

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related