Problem with positioning DIVs inside a floating DIV

[tuleby]

Hi

I have a couple of floating boxes, and inside each of these I want:

* an image
* a H2 heading overlaying the image
* 2 separate texts positioned under the image

Also, the height of the box should be automatic, and not fixed. As you see they are resizable down to a certain width.

I have tried a bunch of different wrappers, floats, positioning etc. for hours, but can’t get it to work.

Any help would be much appreciated.

Codepen:
http://cdpn.io/cCxgf

Desired result:
http://tuleby.se/csst.jpg

Thanks

[Paulie_D]

As I am fond of saying, absolute positioning should be used sparingly, if at all.

There are much better options for layout.

Right, let me have a look and see what we have.

[jurotek]

[Like this?](http://cdpn.io/AKtxF “”)

[jurotek]

@CrocoDillon, good point, thanx

[Paulie_D]

Here you go. : http://codepen.io/Paulie-D/pen/ckvDz

Only absolute positioning required is on the h2 tags.

[tuleby]

Awesome guys, excellent! Thanks a million! Glad to get rid of some absolute positioning. :)

[Author]

Posts