CODEWITHSUNDEEP
htmlcsscss-position
Casebash
Casebash

Reputation: 118952

Relative positioning and background

When positioning an element relatively, as far as it's parent is concerned, it is still in the position where it would be without the relative declaration. This means that the parent's block doesn't extend to where the objects has been repositioned.

enter image description here

In this example, the light blue/green background around the big picture and "Beach House" text, doesn't extend to the bar below (with Privacy and Like Us, ect.). This is because the bar is positioned using relative. Is there an easy way to extend the rectangle to cover the bottom bar?

Here is a simplified version in jsFiddle.

Upvotes: 0

Views: 79

Answers (2)

Simon Arnold
Simon Arnold

Reputation: 16177

Why not using a combinaison of float: left; margin: X;
instead of position: relative; top: Xpx; left: Xpx;
View example here http://jsfiddle.net/zpV3m/7/

Upvotes: 1

corymathews
corymathews

Reputation: 12619

I assume since you are relying on the html5 tags, I can ignore old IE so I used the css box-sizing property to simplify it, the code and achieve the same effect.

http://jsfiddle.net/zpV3m/4/

I left the rgb colors even though you really should change them back to the normal hex values to gain IE8 support.

Upvotes: 1

Related Questions