CODEWITHSUNDEEP
htmlcsscss-float
Industrial Themes
Industrial Themes

Reputation: 567

How do I float two elements of different widths to the left of one large block of text?

I have a blog article that contains three elements: 1) the post thumbnail, 2) a social media box, and 3) the article text. I want the text to float to the left of the thumbnail (easy enough) and I also want the text to float to the left of the social media box with the social media box displaying underneath the thumbnail. Another way of saying it is, I want the thumbnail to be above the social media box, but have the article text float to the left of them both. The problem is, the thumbnail is wider than the social media box, and there is a large gap to the right of the social media box to make up for the width of the thumbnail. How can I get the text to float to the left of both elements and fit snug up against both elements?

My code is available in jsFiddle

Upvotes: 1

Views: 401

Answers (2)

Ben Blank
Ben Blank

Reputation: 56624

You can get the text to wrap each sidebar item individually by floating them separately, rather than wrapping all the items in a floated div:

.article-image, .sharebox-outer {
    clear: left;
    float: left;
}

jsFiddle

Upvotes: 1

dmackerman
dmackerman

Reputation: 2966

Give the a specific width so that it fills up the entire containing div, pushing the floated social media box down.

h2.gentesque { float:left; width: 500px; }
.article-image { float:left; width: /* whatever width */ }

Upvotes: 0

Related Questions