html - CSS - margin and padding dont work on positioning vertical -
i making this:
it looks like:
as can see there, things bad positioned, try use padding margin fix not moving verticaly, how can fix it?
my html:
<div class='article-container'> <div class='article'> <div class="img-position"> <a href="#"><img src="http://funedit.com/andurit/try1/images/foto.png"/></a> </div> <span class="topic-name"><a href="#">název topicu nebo článku </a></span> <span class="date">28.8.2014 / 19:30</span> <span class="author"> od<a href="#"> dwandy </a></span> <span class="article-description"> ahoj jak se máte já se mám dobře ale nevím jak vy teda se máte? </span> <span class="article-comments"> <a href="#"> 4x reakce </a></span> <a href="#"><span class="read-article"></span></a> </div> </div>
my css:
div.article-container { width:987px; } div.article { width:326px; height: 145px; display:inline-block; } div.img-position { display:inline-block; float:left; margin: 10px 0px 0px 5px; } span.author a{ color:#555555; text-decoration: none; } span.topic-name{ margin: 50px 0px 0px 0px; } span.topic-name a{ color:#666666; text-decoration: underline; margin: 50px 0px 0px 0px; } span.article-description{ margin: 10px 0px 0px 0px; width: 325px; display: block; } span.article-comments{ margin: 25px 0px 0px 0px; float:left; } span.read-article{ background-image: url("images/readit.png"); background-repeat: no-repeat; display:block; width: 63px; height: 26px; float:right; margin: 18px 0px 50px 0px; } span.article-comments a{ text-decoration: underline; color:#2d79bd; } span.date { color:#a5a5a5; }
is here can me fix looks on image? live preview can found on: http://funedit.com/andurit/try1/
thanks reading topic.
position: relative;
or absolute
, use top left
Comments
Post a Comment