need help again, please help!!!

[alextash]

CSS

#wrapper {

width: 500px;

height: 500px;

margin: 0 auto;

background: yellow;

}



#header {

background: blue;

position: absolute;

}

HTML

Paragraph 1


Paragraph 2

My first question is
1. Why my header is positioned relative to #wrapper, and not relative to page. I thought that if you dont specify any properties then positioning should be relative to the browser window with top:0; and left: 0;. Is it wrong? if yes, what is the correct answer?

2. why the width of my #header becomes as a width of paragraphs? Does absolutely positioned element lose its auto width?

[timmey]

hey alextash,

1) the #header needs a left-attribute, then you will see that its positioned to the browser window.

2) if you set position:absolute you need a width like wrapper has.

i made a jsfiddle, where you can see it and placed another div inside wrapper. just test a little bit and you will see how it works: http://jsfiddle.net/s9e9U/

and finally you can take a look at https://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/ if you havent already

[alextash]

Thank timmey, video podcast answered many of my question. Appreciate

[wolfcry911]

with an absolute positioned element, you don’t need a width. The default auto width will ‘shrink wrap’ to its contents. In your case the contents are block level paragraphs that take up all available width, so the AP is full width as well.

[alextash]

Thanks very much wolfcry911 and Schmotty. This is what I really wanted to find out . Appreciate your help guys.

[Author]

Posts