CODEWITHSUNDEEP
css
redconservatory
redconservatory

Reputation: 21934

Setting the width to 100%

I have a layout that looks kind of like this:

a media "object"

And the code looks like this: http://jsfiddle.net/redconservatory/L8tBk/

Basically, there is a div on the left that is floated left so that the text and the button end up on the right of the image (which is also floated left).

However, to get this to work I have to put a width on the inner div or else the div will float below the image.

This is all right until the user does not upload an image, and then what I get looks like this:

http://jsfiddle.net/redconservatory/dr3FG/

With the text just taking up a part of the container, instead of filling out to fill up the entire container.

Is there any way around this? I would like the text to take up most of the container...

Upvotes: 1

Views: 62

Answers (1)

mikevoermans
mikevoermans

Reputation: 4007

Yes - I'd recommend understand the "media element" by Nicolle Sullivan http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

Essentially:

img { float: left; }
.description { overflow: hidden; }

Now if there is an image its ok, if there isn't, its ok. Remove widths and floats from your description. Use padding to get desired effects needed, or put a margin on the image.

Upvotes: 1

Related Questions