CODEWITHSUNDEEP
csscss-position
Charlie
Charlie

Reputation: 1338

Why is there a gap visible when I use "position: relative;"

I am currently working on a site, learning as I build, and I have come across a strange problem... For some reason I cannot figure out why there is a big gap between the top of the body and the content.

The problem can be seen at http://www.ruthpower.tk/.

Here is a simplified example on jsFiddle. Why is the red background of #wrapper showing through above #content?

Upvotes: 0

Views: 188

Answers (1)

Zeta
Zeta

Reputation: 105886

Use position:absolute on your #button and position:relative on your #slideshow, then position your #button with absolute values.

See http://www.w3.org/TR/css3-positioning/#relative-positioning / http://www.w3.org/TR/CSS2/visuren.html#relative-positioning:

A relatively positioned box keeps its normal flow size, including line breaks and the space originally reserved for it.

Update: This example jsFiddle is the simplified example's solution (note the comments marking what has changed form the original).

Upvotes: 2

Related Questions