css - How to clear the bottom of an image like clear left / right -


is there way clear bottom of image? tried margin-bottom: 100%, , padding-bottom: 100%, not working because have more divs below clears all.

i want clear content of image containing div.

html

<div class="contentpart">     <p>       <a href="http://www.s1waterbike.ro/wp-content/uploads/2013/07/contact-feat1.jpg">         <img class="alignnone size-medium wp-image-88" alt="contact-feat" src="http://www.s1waterbike.ro/wp-content/uploads/2013/07/contact-feat1-300x200.jpg" height="200" width="300">       </a>     </p>     text.... </div> <div class="contentpart">    text..... </div> 

css

.contentpart img {     float: left;     clear: bottom; } 

example of how solution should like

example of how solution should like

based on image, can realize layout using the following html:

<div class="contentpart">       <a href="#">           <img src="http://placehold.it/300x200">       </a>       donec adipiscing, lorem non euismod venenatis... </div> 

and applying following css rules:

.contentpart {     border: 1px dotted gray;     display: table; } .contentpart {     display: table-cell;     vertical-align: top;     padding-right: 20px; } 

you can see demo at: http://jsfiddle.net/audetwebdesign/wknja/

how works

you can use css tables text stay in single column without wrapping in block element.

apply display: table parent block , display: table-cell a tag.

you can have control on white space applying padding a element.


Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -