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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Feb 2007
    Posts
    219
    Thanks
    25
    Thanked 1 Time in 1 Post

    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 Thumbnails Attached Thumbnails removing unknown white space ?-problem.jpg  

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Change value of height to 100px; will resolve your issue

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

  • Users who have thanked vikram1vicky for this post:

    docock (09-04-2011)

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Posts
    219
    Thanks
    25
    Thanked 1 Time in 1 Post
    Thanks that solved it


  •  

    Posting Permissions

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