positioning following divs after setting the top

liunx

Guest
I have three divs as follow:


<DIV>
some text
</DIV>

<DIV STYLE='background-color:yellow;position:relative;top:-10px;'>
<IMG SRC='http://www.google.co.uk/intl/en_uk/images/logo.gif' STYLE='vertical-align:bottom;'>
</DIV>

<div style='background-color:blue;'>
some text
</dIV>


As you see I dragged the second div 10 pixels to the top. The problem is that the third div stays at the same palce as if the second one wasn't dragged up. - I mean there is a 10 pixels distance between the second and the third div.-

So now I have to do the same - top:-10px - for all divs after the second div. Is this the only way? Do I have to set the top for every single div that comes after the second one or there is a simpler way?Hi -
Two things that I think are necessities on nearly every element are width: and margin:. [It also helps to place your content divs inside of a 'wrapper' or 'container' div to control/style the basic layout sz. as separate from the body.]

If you just put margin:0 auto 10px auto; on div 1, that'd force the second to drop 10px lower - ditto for the third. Relative positioning is usually only necessary when margins, widths, floats, padding and text alignment, etc. just won't get you what you need.

Good luck,
ElHi -
Two things that I think are necessities on nearly every element are width: and margin:. [It also helps to place your content divs inside of a 'wrapper' or 'container' div to control/style the basic layout sz. as separate from the body.]

If you just put margin:0 auto 10px auto; on div 1, that'd force the second to drop 10px lower - ditto for the third. Relative positioning is usually only necessary when margins, widths, floats, padding and text alignment, etc. just won't get you what you need.

Good luck,
El
Thanks

I don't want to push it down but drag it up. That causes the problem. Putting all in a container didn't help. the container height became the total of all.Use margin-top instead of top.
 
Back
Top