1px Gaps Between Div's

HTML & CSS
1

Hi There All,

I have a small problem with the css styling in a website that I am developing. I am placing a few div’s direcly on top of each other, my method worked for 2 of the divs but for one of them there is an approximately 1px gap. Any suggestions? A screenshot is below:

I think it would be better to view the page yourself on your own browser, at http://pingme.tk/geosite.php?sv=ww2.experthowto.co.cc&sv2=experthowto.co.cc&file=default.php , you can see the litte 1px gap in any browser.

At the moment the css stylesheet is located: http://pingme.tk/geosite.php?sv=ww2.experthowto.co.cc&sv2=experthowto.co.cc&dir=/css&file=experthowto.css , that’ll give you a much better idea of what i’ve done and what can be done.

The body part of my html file is as follows:

<div id="pre_header">
	abc1234
</div>
<div id="header"></div>
<div id="container">
    <!-- CONTAINER ADJUSTMENTS -->
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <!--  END CONTAINER ADJUSTMENTS -->
</div>
<div id="footer">

  <!-- FOOTER ADJUSTMENTS -->
     <br /><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <!-- END FOOTER ADJUSTMENTS -->
  
</div>

<snip>

Thanks in Advance
Humza

2

You have set a height on the top element of 35px, but your image is only 34px tall…

3

May I ask why you have all those breaks in the container. That is not what you call proper mark up

4

Thanks Stevie D, it works now!!

donboe: Its not a proper mark up, the breaks for the container div is temporary just to fill up space while i design it, as for the footer i am putting the breaks because when i put the following into the css nothing happens

#footer p {
	margin-top: 30px;
}

to achieve the same effect i used loads of breaks, i don’t want to continue using breaks so if you have a solution please say.

5

What do you want to happen. I just took the breaks out of the footer without seeing a difference. Which is not strange because the footer is an image and there is no <p> in your footer. If you explain what you want, I’m sure there is someone around who can help you

6

the breaks for the container div is temporary just to fill up space while i design it

Hi,
Just answered that for someone else, I usually use min-height: to hold divs open while testing.

Sometimes I will also set a couple of <p> tags in there with huge margins or paddings.

Here’s an example using :

<p class=“scroll”>Scrolling test text</p>

p.scroll {padding:2em 0;}