css - How would you manage this layout with a CMS -

these sort of layouts - horizontal aligned text , images lists, tend pretty popular on features pages of websites, ive designed 1 , coded up, come across mind when project handed on non technical person can edit text, set text / image alignment off.

to fix need edit css, thats not suitable people.

is there better way manage ?

this html/css im using ive made jsfidlle if 1 wants play

<div class="feature">     <p class="left">lorem ipsum dolor sit amet, consectetur adipisicing elit. sequi tempora eaque magni obcaecati quis @ corrupti perferendis eum magnam ipsum maiores quod fugit dolorum odio temporibus voluptate asperiores atque esse.</p>      <img src="http://pictures-of-cats.org/wp-content/uploads/images/bengal-cat-ravi-w.jpg" width="200" height="200"/> </div>  <div class="feature">     <p class="right">lorem ipsum dolor sit amet, consectetur adipisicing elit. sequi tempora eaque magni obcaecati quis @ corrupti perferendis eum magnam.</p>      <img src="http://pictures-of-cats.org/wp-content/uploads/images/bengal-cat-ravi-w.jpg" width="200" height="200"/> </div> 

css

#wrapper {width:500px;}  p {width:280px;} p.left {float:left; padding:30px 0 0 0;} p.right {float:right; padding:45px 0 0 0;}  img {float:left;} 

just manage parent media markup css selector 'non-technical' user understand. like

<markup class=image-left'><markup><img/></markup></markup> 

then show client use '.image-left' and/or '.image-right'

or better, manage whole layout start, making sure 'image' float left or right, depending on row laying.

css

.markup:nth-child(even) {style float image left} .markup:nth-child(even) img {float:left;margin:0 10px 10px 0} .markup:nth-child(odd) {style float image right} .markup:nth-child(odd) img {float:right;margin:0 0 10px 10px}