У меня есть поле контента (#left-home-content), с серией абзацев, и в конце ссылка в <span> (.read-more-link), а затем <div> (#left-home-spread), которая Я хочу позиционировать абсолютно снизу коробки. Это достаточно просто. Хитрость в том, что я хочу, чтобы абзацы обернулись вокруг этого <div>. Код ниже, сначала CSS:
/* @group Left upper home content */
#left-home-content-container {
background-image: url(/dev/images/bg-primary-content.png);
height: 273px;
padding-top: 30px;
margin-top: -15px;
margin-left: 31px;
position: relative;
float: left;
}
#left-home-content {
width: 590px;
height: 240px;
}
#left-home-content h3 {
font: normal 20px/1.2 AvenirLTStd65Medium, "Helvetica Neue", HelveticaNeue, Helvetica-Neue, Helvetica, Arial, Verdana, sans-serif;
color: #e2876a;
margin-bottom: 6px;
font-size-adjust: 0.47;
}
#left-home-content p {
line-height: 1.6;
margin-bottom: .6em;
}
.read-more-link {
display: block;
font-family: AvenirLTStd65Medium, "Helvetica Neue", HelveticaNeue, Helvetica-Neue, Helvetica, Arial, Verdana, sans-serif;
font-size-adjust: 0.47;
font-weight: normal;
font-style: normal;
margin-top: 12px;
}
#left-home-content .read-more-link {
margin-top: 12px;
}
#left-home-spread {
position: absolute;
bottom: 34px;
right: 34px;
}
/* @group Spread the word */
.spread-the-word {
background: url(/dev/images/bg-spread.png) no-repeat;
width: 260px;
height: 31px;
padding-top: 17px;
padding-left: 15px;
-moz-border-radius: 10px; /* FF1+ */
-webkit-border-radius: 10px; /* Saf3-4 */
border-radius: 10px; /* Opera 10.5, IE 9, Saf5, Chrome */
box-shadow: 0 0 5px rgba(86,86,86,0.25);
-moz-box-shadow: 0 0 5px rgba(86,86,86,0.25);
-webkit-box-shadow: 0 0 5px rgba(86,86,86,0.25);
}
.spread-the-word ul {
float: left;
margin: -7px 0 0 8px;
width: 115px;
}
.spread-the-word li {
float: left;
list-style: none;
width: 28px;
height: 28px;
margin: 0 12px 0 0;
}
.spread-the-word .last-item {
margin-right: 0;
}
#left-home-content .spread-the-word h3 {
color: white;
font-size: 16px;
float: left;
font-size-adjust: 0.47;
width: 129px; /* Specified to correct for MobileSafari oddness re: SVG fonts*/
text-shadow: #627C39 0 0 10px;
text-shadow: rgba(98,124,57,0.5) 0 0 10px;
}
#left-home-content .addthis_32x32_style .at300bs,
#left-home-content .addthis_32x32_style .at15t {
background: url(/dev/images/spread-the-word/spread-the-word-icons.png) no-repeat left;
overflow: hidden;
display: block;
background-position: 0 0;
height: 28px;
width: 28px;
line-height: 28px!important;
}
#left-home-content .at300bs:hover {
opacity: 1;
box-shadow: 0 0 15px #fff;
-moz-box-shadow: 0 0 15px #fff;
-webkit-box-shadow: 0 0 15px #fff;
}
#left-home-content .addthis_default_style .at300b,.addthis_default_style .at300m { padding: 0; }
#left-home-content .addthis_32x32_style .at15t_compact { background-position: 0 0; width: 28px; height: 28px; margin-right: 0; }
#left-home-content .addthis_32x32_style .at15t_facebook { background-position: 0 -78px; width: 28px; height: 28px; }
#left-home-content .addthis_32x32_style .at15t_linkedin { background-position: 0 -156px; width: 28px; height: 28px; }
/* @end */
/* @end */
И HTML, чтобы пойти с ним.
<section id="left-home-content-container" class="left-col">
<div id="left-home-content">
<h3><a href="#">Now Let’s Make a Difference</a></h3>
<div class="spread-the-word" id="left-home-spread">
<h3>Spread the Word</h3>
<ul class="addthis_toolbox addthis_32x32_style addthis_default_style">
<li><a class="addthis_button_linkedin"></a></li>
<li><a class="addthis_button_facebook"></a></li>
<li class="last-item"><a class="addthis_button_compact"></a></li>
</ul>
</div>
<p>Donec non sapien quis sapien vehicula pellentesque sed eu lacus. In at eros nec mi imperdiet tempor at non dolor. Morbi porta pretium sollicitudin. Proin blandit consequat turpis at pulvinar. Aliquam eros lectus, dictum sed consequat a, congue sed leo. In in eros at lacus laoreet feugiat. Ut pellentesque dolor eget sem vulputate bibendum. Ut pellentesque dolor eget sem vulputate biben dum biben.</p>
<p>Nulla vehicula lobortis ullamcorper. Aliquam pellentesque, nulla non condimentum vulputate.</p>
<span class="read-more-link"><a href="#">Read More</a></span>
</div><!-- end #left-home-content -->
</section><!-- end #left-home-content-container -->
А вот снимок экрана , чтобы проиллюстрировать, каким я хотел бы, чтобы мой конечный результат был похож (.read-more-link займет свою позицию из текста выше, его не нужно выравнивать по #left-home-spread).
Есть идеи? position:absolute; и float не смешиваются, position:relative; просто имеет "Spread" <div> (он же #left-home-spread), позиционирующий себя относительно текстового содержимого над ним. Помещение #left-home-spread над содержимым (как оно есть сейчас), установка его float:right; и выделение ему большого margin-top приводит к зияющей дыре с правой стороны, так как margin считается частью плавающего #left-home-spread.
Идеи, кто-нибудь?