CODEWITHSUNDEEP
htmlcsscss-floatwidth
Paul
Paul

Reputation: 1502

Width of a float-right box to max width

Similar to the question here:

CSS - Float to max width

I'm attempting a <pic> / <info> style layout - but the twist is that I want to make this layout responsive should the user resize the browser smaller.

For this I need to put the <info> box above the <pic> box in the layout so that when the width falls below a certain pixel width, I remove the "float right" from <info> and it should slot in nicely above the pic box.

Here's a JS fiddle of the full-size layout:

http://jsfiddle.net/FNwcA/

Is there a way to make the "Fred" box fill the width so that it buts up against the red box without using exact pixel widths?

Thanks!

Upvotes: 2

Views: 214

Answers (1)

bfavaretto
bfavaretto

Reputation: 71918

If the picture div comes before the info div, you can float it left instead, and remove that according to the viewport width (with media queries). DEMO.

As the accepted answer to the linked question says:

It doesn't make much sense to float something when you want it to expand to fill the parent

Upvotes: 2

Related Questions