Web Analytics Made Easy -
StatCounter removing unknown white space ? - CodingForum

Announcement

Collapse
No announcement yet.

removing unknown white space ?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • removing unknown white space ?

    I've got a little problem with my coding I can't figure out myself.
    The webpage consists out of a header, a footer, and a main div divided in a left and right column.

    That right column consists out of multiple images with some text next to it.

    My problem is that when I place a new image + text beneath an other image+text, there is a lot of white space between them, it almost looks like hard returns, but there ain't any hard returns in my script.

    I've included an image so that you can see where the problem occures.
    I hope you know what's wrong with my scripting.

    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" />
    
    <style type="text/css">
    /*<![CDATA[*/
    * {
    margin: 0;
    }
    html, body {
    height: 100%;
    margin: 0 auto;
    text-align:center;
    }
    .wrapper {
    background: #fff;
    width:1024px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -2em;
    }
    
    .footer {
    margin: 0 auto;
    text-align: center;
    width: 1024px;
    background: #fff;
    clear: both;
    height: 2em;
    }
    
    .push {
    clear: both;
    height: 2em;
    }
    
    .articlewrapper{
    width: 600px;
    height: 120px;
    background: #fff;
    margin-top: 15px;
    margin-left: 25px;
    border-bottom:1px solid #ccc;
    }
    
    .articlewrapper2{
    width: 600px;
    height: 120px;
    background: #fff;
    margin-top: 4px;
    margin-left: 25px;
    border-bottom:1px solid #ccc;
    }
    
    .articleimage{
    width: 140px;
    height:116px;
    margin-right:20px;
    border: 0px;
    float: left;
    }
    
    .articletext{
    margin-top: 15px;
    width:400px;
    float: left;
    margin-right:20px;
    height:160px;
    }
    
    /*]]>*/
    </style>
    <title></title>
    </head>
    <body>
    <div class="wrapper">
    
    	<div style="background: #eaeaea;height: 100px;">header</div>
    	<div style="height:680px; width:100%; background: #fff;">
    		<div style="float: left; width:342px; height:100%; background: #fff;">
    			<div style="margin-top:60px;"><img src="ulla.jpg" alt="promotor"/></div>
    		</div>
    	
    		<div style="float: left; width:658px; background: #fff;text-align:left;">
    			
    			<div class="articlewrapper">
    			     <img class="articleimage" src="student.jpg" alt="student" />
    				 <div class="articletext"><b>Student</b><br /><br />2,00 euro</div>
    			</div>
    			<div style="clear: both; "></div>
    			
    			<div class="articlewrapper2">
    			     <img class="articleimage" src="ash.jpg" alt="student" />
    				 <div class="articletext"><b>Ash</b><br /><br />140 euro</div>
    			</div>
    			<div style="clear: both; "></div>
    
    		
    		</div>
    		<div style="clear:both;"></div>
    	</div>
    	
    	<div class="push"></div>
    </div>
    
    <div class="footer"><p>Copyright (c) 2008</p></div>
    </body>
    </html>
    Attached Files

  • #2
    Change value of height to 100px; will resolve your issue

    Code:
    .articletext{
    margin-top: 15px;
    width:400px;
    float: left;
    margin-right:20px;
    height:101px;
    }

    Comment


    • #3
      Thanks that solved it

      Comment

      Working...
      X