kranopodem

Здравствуйте, дорогие друзья! Очень нужна ваша помощь. Сейчас верстаю страничку и всё никак не могу сделать вот что из этого мне нужно сделать это верстаю для wordpressа. Никак не могу закинуть это облачко за границу этого заголовка. Также не могу количество комментариев переместить внутрь облачка. Помогите, добрые люди) Пожалуйста. Заранее спасибо.

Огромное спасибо, всё получилось=)

Здравствуйте, добрые люди) Помогите пожалуйста мне вот с чем. Я хочу сделать вывод статей в две колонки. Сначала вроде всё получилось, но потом я заметил, что если блок из первой колонки немного увеличивается в размерах(точнее, в высоте), то нижний блок сразу падает вниз и отображается как будто он находится под блоком, который справа него. Если вы ничего не поняли =) То на картинке всё отчетливо видно. Мне нужно, чтобы этот блок так не падал. Что посоветуете сделать? <div class="content"> <div class="post-main"> <div class="zagolovok"><h1><a href="#">Прикольное видео Мега супер прям я круто супер </a></h1> </div> <img class="miniimg" src="images/chuck-norris.jpg" alt="" /> <div class="excerpt"> <p>Это видео очень интересное и познавательное, я понял смысл жизни просмотрев это видео.dsadasdasdasdadasdssadasdasdadadsdadsadasdasdasdadasddasdasdasdasdasdsadasdsddddddddddddddddddddddddddddddddddddddddd </p> <a href="#">Читать полностью...</a> </div> <div class="dop"> <div class="left">Рубрика : <a href="#">Ололоева, Квашнева, Алдексеевна, Алешкина</a><br/></div> <div class="center">Дата: <a href="#">03/02/2012</a><br/></div> <div class="right">Комментариев: <a href="#">666</a></div> </div> </div> <div class="post-main"> <div class="zagolovok"><h1><a href="#">Прикольное видео Мега супер прям я круто супер </a></h1> </div> <img class="miniimg" src="images/social/image1.jpg" alt="" /> <div class="excerpt"> <p>Это видео очень интересное и познавательное, я понял смысл жизни просмотрев это видео.dsadasdasdasdadasdsadadsdasddddddddddddddddddddddddddddddddddddddddd</p> <a href="#">Читать полностью...</a> </div> <div class="dop"> <div class="left">Рубрика : <a href="#">Ололоева, Квашнева, Алдексеевна, Алешкина</a><br/></div> <div class="center">Дата: <a href="#">03/02/2012</a><br/></div> <div class="right">Комментариев: <a href="#">666</a></div> </div> </div> <div class="post-main"> <div class="zagolovok"><h1><a href="#">Прикольное видео Мега супер прям я круто супер </a></h1> </div> <img class="miniimg" src="images/chuck-norris.jpg" alt="" /> <div class="excerpt"> <p>Это видео очень интересное и познавательное, я понял смысл жизни просмотрев это видео.dsadasdasdasdadasdsadadsdasddddddddddddddddddddddddddddddddddddddddd</p> <a href="#">Читать полностью...</a> </div> <div class="dop"> <div class="left">Рубрика : <a href="#">Ололоева, Квашнева, Алдексеевна, Алешкина</a><br/></div> <div class="center">Дата: <a href="#">03/02/2012</a><br/></div> <div class="right">Комментариев: <a href="#">666</a></div> </div> </div> <div class="post-main"> <div class="zagolovok"><h1><a href="#">Прикольное видео Мега супер прям я круто супер </a></h1> </div> <img class="miniimg" src="images/chuck-norris.jpg" alt="" /> <div class="excerpt"> <p>Это видео очень интересное и познавательное, я понял смысл жизни просмотрев это видео.dsadasdasdasdadasdsadadsdasddddddddddddddddddddddddddddddddddddddddd</p> <a href="#">Читать полностью...</a> </div> <div class="dop"> <div class="left">Рубрика : <a href="#">Ололоева, Квашнева, Алдексеевна, Алешкина</a><br/></div> <div class="center">Дата: <a href="#">03/02/2012</a><br/></div> <div class="right">Комментариев: <a href="#">666</a></div> </div> </div> </div> Вот CSS код: .content { width:670px; margin-top:10px; word-wrap:break-word; border:1px solid #c5c5c5; float:right; margin-right:5px; background:#e7f3fb; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .post-main { background:#ffffdb; width:303px; border:1px solid; margin: 15px; float:left; } .post-main a{color:#0096ff; font-weight:600;} .post-main a:hover{ text-decoration:none; } .post-main h1 a{ color:#0096ff; font-family:Ubuntu; font-weight:600; font-size:20px;} .post-main h1 a:hover{ text-decoration:none;} .miniimg {margin-left:15px; margin-top:10px; border:1px solid #c2c2c2; width:264px; height:200px;} .titcon { font-family:Ubuntu; float:left; font-size:24px; padding-top:20px; font-weight:600;} .excerpt { padding:10px 10px 20px 10px; } .excerpt p{ margin-bottom:15px; } .dop { border:1px solid #c2c2c2; background:#d0edaa; padding:10px; } .dop a { color:#F7941d; font-weight:600; font-family:Ubuntu; text-decoration:none; font-size:14px;} .dop a:hover {text-decoration:underline;} .dop .left {text-align:left; padding-bottom:5px;} .dop .left a{ font-weight:normal; color:#0096ff; } .dop .center { text-align:left; padding-bottom:5px;} .dop .right { text-align:right; margin-top:-20px;} .dop .center a{color: #3333FF; } .dop .right a{color: #3333FF; } .zagolovok {padding:10px;} Прошу помочь =) Заранее спасибо...