CSS to keep two DIVs left and right? -

CSS to keep two DIVs left and right? -

the source is:

<article> <div class="field field-name-body field-type-text-with-summary field-label-hidden"> <div class="field-items"> <div class="field-item even" property="content:encoded"> text @ left </div> </div> </div> <div class="field field-name-field-image field-type-image field-label-hidden"> <div class="field-items"> <div class="field-item even"> <img src="right.jpg" alt="at right" /> </div> </div> </div> </article>

how can alter css create 2 divs like?

+--------------+--------+ |text @ left | ####| | | ####| | | ####| | | | | | | +--------------+--------+

i.e. text alight top-left @ left div, image align top-right @ right div.

update:

i using like:

.field-name-body { width: 320px; float: left; } .field-name-field-image { width: 300px; float: right; }

but not sure how protect above class polluting css global name space. wish can limit float left , float right within article scope...

jsbin

from dom, may utilize other front end frame. so, should define css restyle dom. , add together next class.

.fr { float: right; } .fl{ float: left; }

css