...

View Full Version : removing unknown white space ?



docock
09-04-2011, 03:34 PM
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.



<!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>

vikram1vicky
09-04-2011, 03:43 PM
Change value of height to 100px; will resolve your issue :)


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

docock
09-04-2011, 04:12 PM
Thanks that solved it :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum