SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Divs causing problems. Image and paragraph issue.

    Hello,

    I'm having some trouble with a CSS layout I'm designing. The top section of my layout has an image on the left with a paragraph on the right. It works fine on Firefox and IE7, but not on IE6.

    The problems arise due to another div below #topcontent (see below) that seems to want to wrap up to the available spaces (especially on IE6), etc.
    I want to the image/paragraph area to interact correctly with any divs below it.

    I *know* there must be a better way of doing this because I'm having to set a height for it to work on Firefox/IE7 and whilst it looks OK, the height causes problems of its own when rezising text (as the resized text spills over the height - which is fixed in this case).

    For some reason I seem to be using the image as a background image, set at the correct width/height. I hope I've explained myself OK I can see how this might be complicated to understand when you're not sat here!


    Here is XHTML/CSS:
    --------------------

    <div id="topcontent">

    <div id="imageontheleft">
    </div>

    <div id="textontheright">
    <p>A paragraph of text goes here.</p>
    </div>

    </div>


    ----

    #topcontent {
    width: 100%;
    margin: 10px 0 0 0;
    }

    #imageontheleft {
    width: 280px;
    height: 150px;
    float: left;
    background-image: url(image.gif);
    background-repeat: no-repeat;
    margin: 0 7px 0 15px;
    }

    #textontheright {
    width: 450px;
    height: 150px;
    float: right;
    }

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about doing away with the floated divs completely, and just styling the paragraph itself - html:
    Code:
    <p class="item">A paragraph of text goes here</p>
    and css:
    Code:
    .item {
    	padding-left: 290px;
    	display: block;
    	min-height: 150px;
    	background-image: url(image.gif);
    	background-repeat: no-repeat;
    	background-position: left center;
    }
    * html .item {
    	height: 150px;
    }
    This sets a minimum height on the paragraph (with a hack to make it work in IE6) and a left padding to make room for the image as a background to the left of the text.

  3. #3
    SitePoint Enthusiast tenfingers's Avatar
    Join Date
    May 2004
    Location
    Alberta, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #topcontent {
    	border:1px solid #ccc;;
    }
    #topcontent p {margin:0}
    #topcontent img {
    	float:left;
    	width:280px;
    	margin:0 7px 0 15px;
    }
    .clearfix:after { 
    	content:"."; 
    	display:block; 
    	height:0;
    	clear:both; 
    	visibility:hidden; 
    }  
    .clearfix { 
    	display:inline-block; 
    } 
    </style>
    
    <!--[if lt IE 7]> 
    <style type="text/css"> 
    /* \ */ 
    * html .clearfix {height: 1&#37;;} 
    .clearfix {display: block;} 
    /* / */ 
    </style> 
    <![endif]-->
    </head>
    
    <body>
    <div id="topcontent">
    <p class="clearfix"><img src="image.gif" width="280" height="150" title="" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ornare metus. Duis at felis. Vestibulum nibh. Phasellus dictum tortor in mi placerat scelerisque. Donec blandit turpis ac quam. Nullam nisi. Maecenas odio odio, dignissim eget, tincidunt sollicitudin, commodo ac, odio. Cras pharetra, ante ac dignissim porta, mauris ante vestibulum sem, vel euismod leo dui eu sapien. Maecenas turpis nunc, sollicitudin vel, placerat ac, pulvinar sed, urna. Nunc a dui. Phasellus in magna at odio luctus aliquet.</p>
    </div>
    </body>
    </html>
    See How To Clear Floats Without Structural Markup

    Since you're using CSS backgrounds in your example, Centauri has shown a method that will give the appearance of a floated image, i.e.,
    HTML Code:
    #topcontent {
    background:transparent url(image.gif) no-repeat 1% 50%;
    padding:0 0 0 302px;
    }
    However, there will be a left margin 302px all the way down to the bottom of the div. Also, with a floated image, height is not an issue, since the image is 150px, and as a contained (and cleared) float, will expand the div to include the full height. Using the CSS background, height will be a factor.
    Last edited by tenfingers; Aug 28, 2007 at 00:43. Reason: Further correction allows multiple floats


Bookmarks

Posting Permissions

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