Question

I got some problems with avatars on my website, when there is a 35x35 avatar, then its ok , problem appear as you know, when the 35x35 pixel dimensions has been exceeded.

I think it’s related with the position: absolute; attribute, but couldnt find any better replacement for this.

Here is a live demo, of what I’m asking for: http://jsfiddle.net/AtJVb/0/

As you can see, avatar is too big – but the elements around still stay at their positions, instead to be moved around.

Here is a live demo with 35 x 35 image: http://jsfiddle.net/AtJVb/1/

Here, everything is perfect, and I want my first example, to look exactly the same (I mean those author, date and comment content elements positions), but with the bigger image size.

Waiting for ANY solution, I’d appreciate.

Answer 1

You could simply float: left that avatar, and clear: left the comment body.

Absolute positioning messes it up here.

an element that is positioned absolutely is taken out of the flow and
thus takes up no space when placing other elements.

from MDN – Absolute positioning