Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS block elements with relative width?

CSS block elements with relative width?

Problem

Here's what I'm trying to pull off...

And the corresponding HTML:


  

Fading Forest

Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.

So what I need to do is wrap each h3 and p in a box, but right now, since the h3 and p tags are block level elements, the corresponding blocks just extend the full width.

I want the width to adjust according to the content (and just apply max-width so they don't extend too wide).

This is what I've got so far, though it doesn't work...obviously. http://jsfiddle.net/hAtRs/

Problem courtesy of: Shpigford

Solution

Forget the inline-block; it doesn't seem to be necessary.

Float and clear to the left:

h3, p {
    float: left;
    clear: left;
}

http://jsfiddle.net/hAtRs/20/

Solution courtesy of: Christian Mann

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS block elements with relative width?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×