Huge space between two items

[OsaMasw]

Hello buddies, I designed a block for items shown on files system, so one block repeated for each item, but I noticed there is a huge space between two items and I dont know why, here is my code and picture to the problem.

css

#Container{
padding:0px;
margin:0px;
position:relative;
top:-160;
width:945;
height:450px;
right:0;
bottom:0px;
border-width: medium;
border: 1px;
border-color:gray;
border-style: solid;
background-color:#e9e9e9;
box-shadow:1px 4px 3px gray; /* CSS3 */
-moz-box-shadow: 2px 3px 10px #999; /* Firefox */
-webkit-box-shadow: 3px 3px 10px #999; /* Safari, Chrome */
-moz-border-radius: 2px; /* Firefox */
-webkit-border-radius: 20px; /* Safari, Chrome */
border-radius: 6px;
 border-top-left-radius: 80px;
border-radius-topleft: 2px;
border-bottom-right-radius: 80px;
border-radius-bottomright: 2px;
}

#cat{
  clear:both;
    position:relative;
  left:130px;
  top:150px;
    border:gray 2px solid;
    box-shadow:4px 5px 5px black;
    padding:5px;
  width:50px;
  height:160px;
 border-top-right-radius: 1px;
   border-top-left-radius: 20px;
border-radius-topleft: 10px;
border-bottom-right-radius: 1px;
border-radius-bottom-right: px;
}

html

<div class="filey" id="cat" align="center">Series</div>
<div class="filey" id="Container"><!-- The Main Container --> 

<div class="filey" id="user" align="center">Uploader: <a href="#">hawkiq</a></div>
<div class="filey" id="info" align="center">
<textarea class="filey" name="info" cols="50" rows="5" id="info">Great series</textarea>
</div>
<div class="filey" id="title" align="center">Coffie House</div>
<div class="filey" id="size" align="center">Size: 200 MB</div>
<div class="filey" id="postimg" align="center"><img src ="pics/hawkiq.jpg" align="texttop" width="150" height="200"/></div>
<div class="filey" id="time" align="center">Date Submitted: 20/11/2012</div>
<div class="filey" id="likes" align="center">Likes: 200</div>
<div class="filey" id="counter" align="center">Downloades : 150</div>

              <iframe id="fr" name="fr" width="50%" height="100px" frameBorder="0" src="comment.php" ></iframe>

              <div class="form" id="commentform" align="center" >
              <form id="commen" name="commentform" method="get" action="comment.php" target="fr">
                <span><input name="comment" type="text" id="comment" size="50" maxlength="255"></span>
                <input class="acbutton" type="submit" name="Submit" value="Comment" />
                </form>


</div>

          </div>

</div><!-- END The Main Container -->

I suspect in "cat" div but I don't know how to fix it

[JorgeM]

Maybe it's just me but what space are you referring to exactly? A notation in the picture would help.

[OsaMasw]

space mentioned in this picture

[JorgeM]

Ok, now I understand what I'm looking at. In your CSS code, line 5, you are missing the "px" after -160. You also have a height of 450px specified. not sure if you really want to specifiy that height. When I fix line 5 and run your code, this is what I get.. the input is outside of the div.

if you are repeating these divs, I assume that you are doing that with some server-side scripting. Just keep an eye on line 4/5 in your CSS. Not sure why you are positioning the divs in this manner.

Is there more revalant code that is missing here and I'm not seeing the whole picture? Do you have this online so that the entire application can be accessed?

[OsaMasw]

Sorry for late in response but we were have a weekend so I didn't work :p, about the subject, am new to CSS so I've created multiple divs and arrange them using css ,
here is the full css code after removing the height attribute:

.filey{
color:black;
font-weight:bold;
}
.Container{
position:relative;
padding:5px;
margin:5px;
top:30px;
width:945px;
right:0px;
border-width: medium;
border: 1px;
border-color:gray;
border-style: solid;
background-color:#e9e9e9;
box-shadow:1px 4px 3px gray; /* CSS3 */
-moz-box-shadow: 2px 3px 10px #999; /* Firefox */
-webkit-box-shadow: 3px 3px 10px #999; /* Safari, Chrome */
-moz-border-radius: 2px; /* Firefox */
-webkit-border-radius: 20px; /* Safari, Chrome */
border-radius: 6px;
 border-top-left-radius: 80px;
border-radius-topleft: 2px;
border-bottom-right-radius: 80px;
border-radius-bottomright: 2px;
}
.title{
  position:relative;
  left:25px;
  bottom:460px;
  background-color:#929292;
  width:910px;
  height:30px;
  box-shadow:2px 3px 2px gray;
  align:center;
  border-radius:8px;
  font-size:20px;
  color:white;
}
.size{
position:relative;
right:223px;
bottom:360px;
}

.postimg{
position:relative;
left:30px;
bottom:420px;
border:white 1px solid;
box-shadow:1px 5px 5px black;
padding:5px;
width:150px
}
.user{
position:relative;
right:218px;
bottom:230px;
}
.time{
position:relative;
right:156px;
top:-560px;
}
.likes{
position:relative;
right:243px;
bottom:562px;
}
.counter{
position:relative;
right:220px;
bottom:615px;
}
.cat{
clear:both;
position:relative;
right:90px;
top:-30px;
border:gray 2px solid;
box-shadow:4px 5px 5px black;
padding:5px;
width:80px;
height:160px;
border-top-right-radius: 1px;
border-top-left-radius: 20px;
border-radius-topleft: 10px;
border-bottom-right-radius: 1px;
border-radius-bottom-right: px;
}
.butto{
position:relative;
  left:650px;
  top:-750px;
}
.contb{
position:relative;
left:375px;
top:-680px;
}
#info{
position:relative;
left:190px;
top:-60px;
width:260px;
}
.fr{
position:relative;
left:-30px;
bottom:540px;
width:400px;
height:120px;
overflow-y: hidden;
}
.commentform{
  position:relative;
  left:240px;
  bottom:530px;
  width:400px;
}

But I think I solved the problem, the "Cat" div is located outside the Main container so when I wrote it inside the main div and few changes to css it become cool, but after few tries I've noticed the items below keep going down untill they outside the main div, now how to solve this problem ?

[OsaMasw]

I've solved the problem, the error was in Position attribute for divs
, I've made the main div "relative" and all other div to "absolute"
and the result was:

[JorgeM]

Well done. glad to hear you resolved your issue.