Structure of web page. Huge gap. HTML or CSS issue? - html

Question

Hi there,
I am trying to build a web page and i have the following problem. I tried to upload a photo but I cannot because I don't have enough votes. I have a contacts page and my problem is that there is a huge gap between the contacts (little photos with people) and the grey layer in the bottom (please vote for me so that I can upload a photo to show you what I mean). I am really confused and I don't know where the problem might be. Here I give some information:
I have created two lists (divs) with photos and contacts (in this picture you can see 2 photos of the leftlist (as i called it) div and one photo of the rightlist div.
The CSS for these two are the following:
#leftlist {
width:430px;
position: relative;
left: 0px;
top: 0px;
bottom: 720px;}
#rightlist {
width:430px;
position: relative;
left: 450px;
bottom: 720px;
top: -670px;}
These two divs I placed them inside the white box as you can see from the photo which I named container. The CSS for container is:
.container {
width:950px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;}
Here I add the whole code of the container including whats inside:
<div class="container">
<div class="box">
<div class="border-top">
<div class="border-right">
<div class="border-bot">
<div class="border-left">
<div class="left-top-corner">
<div class="right-top-corner">
<div class="right-bot-corner">
<div class="left-bot-corner">
<div class="inner">
<h2> </h2>
<h2 align="center">Sales and Customer Service Team</h2>
<h2 align="center"><br />
<br />
</h2>
<div id="leftlist">
<ul class="list2">
<li>
<img alt="" src="images/blabla.jpg" />
<h4><strong>blabla </strong>
President<br />
<br />
<span class="style100">Email: blabla#sblabla.it</span><br />
<span class="style100">Tel: [phone]</span><br />
</h4></li>
<li></li>
<br />
<li>
<img alt="" src="images/blabla.jpg" />
<h4><strong>blabla </strong>
General Sales Manager<br />
<br />
<span class="style100">Email: blabla#blabla.it</span><br />
<span class="style100">Tel: [phone]</span><br />
</h4>
</li>
<li></li>
<br />
<li>
<img alt="" src="images/blabla.jpg" />
<h4><strong>blabla </strong>
Sales Manager<br />
<br />
<span class="style100">Email: blabla#sblabla.it</span><br />
Tel: [phone]<br />
</h4></li>
<li></li>
<br />
<li>
<img alt="" src="images/lara.jpg" />
<h4><strong>Lara blabla</strong>
Sales and Logistics<br />
<br />
<span class="style100">Email: lara.blabla#blabla.it</span><br />
Tel: [phone]<br />
</h4></li>
<li></li>
<br />
</ul>
</div>
<div id="rightlist">
<ul class="list2">
<li>
<img alt="" src="images/blabla.jpg" />
<h4><strong>blabla</strong>
Laboratory Manager and Quality Control<br />
<br />
<span class="style100">Email: blabla#blabla</span><br />
Tel: [phone]<br />
</h4></li>
<li></li>
<br />
<li>
<img alt="" src="images/blabla.jpg" />
<h4><strong>blabla</strong>Technical Department<br />
<br />
<span class="style100">Email: blabla#blabla.it</span><br />
Tel: [phone]<br />
</h4></li>
<li></li>
<br />
<li>
<img alt="" src="images/blabla.jpg" />
<h4><strong>blabla</strong>Safety Manager<br />
<br />
<span class="style100">Email: blabla#blabla.it</span><br />
Tel: [phone]<br />
</h4></li>
<li></li>
</ul>
</div>
</div>
<div align="center"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- box end -->
</div>
Tip: there are more photos and contact details that are not visible in the photo I upload as i wanted to show you the gap between the container div and the next div (grey layer).
I am really sorry in advance if I am asking something stupid but I've been working on this for 8 hours now and I can't seem to find a solution. Maybe the solution is really stupid but my brain feels like its frying right now :p

Answer 1

Right, there are a couple of issues with the code you have here, most notably the number of divs you are using (I assume that's just for the rounded corners?). However I believe your issue is caused by the positioning of the #leftlist and #rightlist. I can't see a reason for these to be position:relative (also when used you should only set the top value or the bottom value, not both (e.g. 'top:0px' OR 'bottom:0px').)
What is happening is you are moving the #rightlist from it's default position under the #leftlist. Because you are using position:relative and not position:absolute the original position is retained. The extra whitespace you are seeing is where the #rightlist should, by default, appear.
I would not use position in this instance. A better alternative is to use 'float:left' on both lists. If you do this your css will end up being the same for each list - try this:
#leftlist
#rightlist {
width:430px;
float:left;
}
This may collapse the #container div which can be fixed in a number of ways, the simplest being adding 'overflow:hidden;height:100%' to #container. A quick google search should provide many more options if required.
Another alternative would be to use 'display:inline-block' instead of 'float:left' although this can cause issues in older browsers - it really depends on what browsers you need to support.
Hope this helps put you on the right track. Please leave a comment if I'm not being clear and I'll edit my response!

Answer 2

You could try the following in order to attempt to identify where the problem lies:
Install the Web Developer add-on in Firefox, load up your page then use the 'Outline Block Level Elements' option to get a visual display of all the elements that make up your page.