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
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
Post a Comment