CODEWITHSUNDEEP
htmlcss
pablasso
pablasso

Reputation: 2499

How to achieve this layout with CSS?

I want to achieve something like this:

Look at my awesome 'mockuping' skills

Usually when I have floating images like A and B, I would put my container position as relative, and obsolute for the floating image, and that will do it, but I'm a little lost with the text here.

This is just going to be used on webkit browsers, if that is of any use.

Upvotes: 0

Views: 136

Answers (2)

methodofaction
methodofaction

Reputation: 72455

If the image size is fixed and unlikely to change in the future, then I'd recommend applying position absolute to the image (what you're saying). I'm guessing your problem is that if the text is too short, the height of the image would exceed the height of the container. This is easily fixable with min-height:

.module {
    min-height: 65px; /*your image height*/
 }

You can view a demo here: http://jsfiddle.net/RkeJJ/

This should work all the way down to IE7.

If your image size is variable, then I'd recommend display: table/table-row/table-cell, but this will work only on IE8+ and the rest of the modern browsers.

Me debes una caña! ;)

Upvotes: 3

Marc Audet
Marc Audet

Reputation: 46825

You know the width of image A (the large image). The title goes in a h1 for example, and the text in a p (or div), so set these two elements to have a left margin greater than the width of image A.

You can then float image A to the left and position the icon B over the image using absolute positioning.

Finally, I would have a wrapper div with overflow: auto to have a border (if needed) and to allow for a bottom margin to provide white space between the following element.

Partial answer: see my code snippet at http://jsfiddle.net/audetwebdesign/Nam52/

You just need to add the date element after the title.

Upvotes: 1

Related Questions