...

View Full Version : Resolved Paragraphs' display bumping floats



mbabb
12-11-2009, 09:21 PM
I was under the impression that floats were taken out of the document flow and adjacent text is then molded to them.

So why are my paragraphs bumping my floated images? I would really like these floats to behave as floats usually do. What gives? Is it the display: block; on the paragraphs? Please help...

CSS,



@charset "utf-8";
/* CSS Document */

.thumbs {
padding: 0px 0px 0px 15px;
}

.thumbs img {
margin: 10px;
}

.reit {
display: block;
font-size: 0.7em;
margin-bottom: 10px;
}
.webreit {
font-size: 0.7em;
margin-bottom: 10px;
border: 1px red solid;
}
p {
text-indent: 0;
}
.details {
display: block;
font-size: 0.5em;
line-height: 2em;
margin: 10px 0px;
border: 1px red solid;
}
.project {
margin-top: 10px;
margin-bottom: 10px;
padding: 10px 0px 15px 0px;
text-indent: 0;
border: 1px red solid;
border-bottom: 3px #233a00 dashed;
}
.webproject {
min-height: 255px;
margin: 10px 0px;
padding: 10px 30px 15px 0px;
text-indent: 0;
border: 1px red solid;
border-bottom: 3px #233a00 dashed;
position: relative;
overflow: auto;
}
.webimg {
float:right;
display: inline-block;
border: 1px red solid;
}

#last {
border: 0px;
}


annnnd HTML:


<div id="web" class="thumbs">
<div class="webproject">
<h4>Selway-Bitterroot Foundation&mdash;Company site redesign</h4>
<p class="webreit">Website adapted from single, sliced JPEG to XHTML/CSS standards compliance.<br />Click image at the right to go there, or <a href="/sbfv2/" target="_blank">here</a> for a local mirror.</p>
<p class="details"><b>Logo:</b> Vectorized existing logo.<br /><b>Website:</b> Fully XHTML/CSS standards-compliant<br /></p><a href="images/portfolio/web/sbf.jpg" rel="lightbox[web]" title="Selway-Bitterroot Foundation&mdash;Company site"><img src="images/portfolio/thumbs/sbf.jpg" border="0" alt="" class="webimg" /></a>
</div>
<div class="webproject">
<h4>GreekCheex.com&mdash;Company site design</h4>
<font class="webreit">Website for a start-up I founded/owned/operated, 2007.</font>
<a href="images/portfolio/web/gc.jpg" rel="lightbox[web]" title="GreekCheex.com&mdash;Company site"><img src="images/portfolio/thumbs/gc.jpg" border="0" alt="" class="webimg" /></a>
</div>
<div class="webproject" id="last">
<h4>EveryGameday.com&mdash;Company site design</h4>
<font class="webreit">Originally GreekCheex, but to accomodate a product focus change, new web address and layout, 2008.</font>
<a href="images/portfolio/web/egd.jpg" rel="lightbox[web]" title="EverygameDay.com&mdash;Company site"><img src="images/portfolio/thumbs/egd.jpg" border="0" alt="" class="webimg" /></a>
</div>
</div>


Thanks in advance for any insight.

---

Edit: :o *facepalm* Just needed to place the images before the paragraphs to get the float I was looking for. Eeesh.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum