css float - Image max-width (non floated) use space next to floated div? -

css float - Image max-width (non floated) use space next to floated div? -

the site i'm working on display lengthy articles on screen. site responsive see on screen re-size , re-flow accommodate different screens. had 2 column layout articles in left floated div. , side bar of shorter content in right hand floated div.

it decided since right hand content short there lots of wasted white space beneath it. asked seek , incorporate right hand column left hand div text wrap around it.

that part pretty easy, floated embedded right hand column article , written text wrapped around it.

see jsfiddle: http://jsfiddle.net/themonkxx/2auca/1/

here html page:

<div class="parent"> <div class="right_content" align="right"></div> lorem ipsum dolor sit down amet, consectetur adipiscing elit. maecenas vitae nunc arcu. cras tortor velit, consectetur quis consectetur vel, ultrices european union nisl. pellentesque convallis orci ligula, id pharetra mauris. vestibulum eleifend, turpis eget commodo dapibus, diam magna nunc auctor elit, nec molestie libero quam quis mi. donec interdum velit non arcu sollicitudin european union ullamcorper lectus venenatis. vivamus @ lacus magna. proin in diam semper urna fermentum molestie sit down amet sit down amet augue. nulla sit down amet massa european union risus laoreet laoreet eget sed erat. aliquam quis enim in odio porta consequat. ut egestas urna et erat iaculis et aliquam libero auctor.</div>

here css

.parent { border: 1px solid green; width: 200px; float: right; } .right_content { width: 25%; height: 150px; float: right; background-color: red; margin: 0 0 7px 7px; }

the problem comes in when seek add together images article content. since site responsive, want images have max-width: 100% applied. when images go 100% of parent container , force written content beneath images gets pushed after right hand column. see fiddle:

http://jsfiddle.net/themonkxx/2a66j/

here updated html page:

<div class="parent"> <div class="right_content" align="right"></div> <img src="http://www.thetop22.com/wp-content/uploads/2012/01/black-keys-banner-3.png" /> lorem ipsum dolor sit down amet, consectetur adipiscing elit. maecenas vitae nunc arcu. cras tortor velit, consectetur quis consectetur vel, ultrices european union nisl. pellentesque convallis orci ligula, id pharetra mauris. vestibulum eleifend, turpis eget commodo dapibus, diam magna nunc auctor elit, nec molestie libero quam quis mi. donec interdum velit non arcu sollicitudin european union ullamcorper lectus venenatis. vivamus @ lacus magna. proin in diam semper urna fermentum molestie sit down amet sit down amet augue. nulla sit down amet massa european union risus laoreet laoreet eget sed erat. aliquam quis enim in odio porta consequat. ut egestas urna et erat iaculis et aliquam libero auctor.</div>

and updated css:

img { max-width:100%; } .parent { border: 1px solid green; width: 200px; float: right; } .right_content { width: 25%; height: 150px; float: right; background-color: red; margin: 0 0 7px 7px; }

giving image pre-defined width fixes layout causes problems responsive nature of site. have articles have images @ various places in copy, can't predict image beside right hand column.

any ideas or suggestions how can desired layout , maintain responsive aspect working? thanks!

without script calculations, might have settle smaller images.

http://jsfiddle.net/2a66j/2/

img { max-width:72%; float: left; }

technically, site isn't "responsive". it's "fluid". if responsive set fixed max-widths based on viewport size , have 100% image width scenarios. minor drawback aren't using 100% of available viewport width page responsive design.

image css-float responsive-design css