SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    clearing element inside float col.

    I have a 2 col layout floating. There's a gap between my img element within these columns. I've try putting a "<div class="clearer"></div> before the wrapper end but it's not clearing. Is that even the correct method to get the element back into flow?

    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" lang="en" xml:lang="en">
    <head>
    <title>2 col</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" media="screen" href="eaInt.css" />
    </head>
    <body>
    <div id="container"> 
      <div id="content"> 
    <div id="right">
    <img src="/images/subtop.gif" />
    <img src="/images/small_logo.gif" alt="globe1" />
    <img src="/images/globe2.gif" alt="globe" />
    </div>
    <div id="left">
    <h2 class="title">title</h2>
        <img src="/images/sub_text.gif" alt="text" />
    </div>
       <div class="clearer"></div>
      </div>
      <div id="footer"> 
      <p>&copy;copyright</p>
      </div>
    </div>
    </body>
    </html>
    Code:
    body {
    	margin: 30px 10px 10px 10px;
    	padding: 0;
    	background:#999;
    	text-align:center;/* center layout in ie5 and 5.5. */
    	font-family: bold verdana , helvetica, sans-serif;
    	font-size: 11px;
    	color: #666;
    }
    #container {
    	width: 723px;
    	margin: 0px;
    	margin-left: auto;
    	margin-right: auto;
    	background-color: #fff;/* this is the background colour of the right column */
    	text-align:left;
    }
    #content {
    	border: 1px solid #666;
    }
    * html #content {height:1%}
    #left {
    	width:393px;
    	float:left;
    }
    .rightwrapper {background: #eee url(/images/ridge.gif) top right repeat-y; text-align:right;}
    #right {
    	width:328px;
    	float:left;
    }
    
    #footer {
    	height: 15px;
    	background: #999;
    	color: #fff;
    	font-weight: bold;
    }
    #footer p {margin: 0; padding: 5px 0 0;} 
    .clearer {
     clear:both;
     height:1px;
     overflow:hidden;
     margin-top:-1px;
    }

  2. #2
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    help

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As your images have no sizes on them I can't tell where they should be and what it looks like.

    Where are the gaps? Are they under the images or in-between them.

    The usual solution is to close all the whitespace in the html so that the images are all back to back with the surrounding div.

    e.g.
    <div><img /><img /></div>

    This gets rid of the space between images depending on circumstance. If the gap is below the image then you can try setting the image to display:block but you can only do that when there is one image per div. If the images are all inline then setting vertical-align:bottom moves the images to the bottom of the line (but the space goes to the top but may not be so noticable.) Alternatively floating the images should get rid of the space.

    You use the clearer inside a div when you want the background (or border) of the parent to encompass it. It goes before the closing div of the parent. Its only needed when the parent needs to encompass it.

    You use the clearer outside a div when you want to make sure that following content is all clear of the floats. Of course you could just set the following content to have clear:both which should do the same anyway.

    Hope some of those methods help.

    Paul

  4. #4
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. The space that i'm getting are bellow the images. So i'll float them.


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
  •