Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Paragraphs' display bumping floats

    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,

    Code:
    @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:
    Code:
        <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: *facepalm* Just needed to place the images before the paragraphs to get the float I was looking for. Eeesh.
    Last edited by mbabb; 12-11-2009 at 09:48 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •