In layout two-column layout alt text

the left column is wrapped on the right with float: left, in the block where the blog posts are located

<article class="post"> <h2 class="postTitle"> Оптимизация страниц сайта</h2> <p class="postInfo">Создана <time datetime="2011-06-14" class="postDate">14.06.2011</time>, Категория <a href="javascript:void(0)" class="postLink">Статьи</a>, by <a href="javascript:void(0)" class="postLink">babanovd</a></p> <div class="postImg"> <img src="images/image_2.jpg" alt="" title="" /> </div> <p class="postText">Любой сайт состоит из нескольких (десятков, сотен, тысяч) страниц. Любая страница — это некий HTML-код. HTML-код, в свою очередь, — это набор тегов, из которых и формируется страница.Оптимизация страниц — важнейший этап в продвижении сайта. Его можно разбить на следующие шаги.</p> <a href="javascript:void(0)" class="postFullLink">Продолжить</a> </article> <!-- /article-->

for the image float: left is also set. I can not figure out how to make the next post do not crawl to the previous one, if there is not enough text in the post, as it turns out here . If you specify after p class = "postText" <div class="clear"></div> , a link text appears. How can I achieve the desired location of the elements?

    1 answer 1

    There are two options:

    1. for article.post - set overflow: hidden;

    2. create pseudo-element -

      article.post:after {content: ""; height: 0; display: block; clear: both; }

    It seems somehow so, if not messed with styles. Googling, bloated topic ...

    If it does not help, and until the evening you can’t do it, then I will help.

    Good luck

    UPD: Here, catch an example - http://jsfiddle.net/Alex83/T2Pj2/2/

    • Thanks, I have done the first option, with overflow: hidden. The second option, unfortunately, is not cross-browser, the after pseudo-element will not work in IE8 and IE7. Thanks for the tip! - Heidel
    • one
      @Heidel, The second version with pseudo-elements can also be made cross-browser, read here at your leisure, if you are interested: xiper.net/collect/html-and-css-tricks/glyuki-brauzerov/IE/… - Astor
    • In addition, the first option is convenient only in those cases where there is confidence that the size of the topic will be fixed and the number of characters will not be increased, otherwise everything that does not fit into the size will be cut off. So, be careful. - Astor
    • Why? I have not given the height of the .post block and everything works. If I increase the amount of text in the .postText block, the block length simply increases down, nothing is cut off. For links to how to make a pseudo-element after cross-browser thanks, I read! - Heidel
    • one
      And ..., well, if so, then I am calm :) Good luck! PS Thank you - please! - Astor