Question

I’ve been working on a small blog form but have been having trouble with my Div tags. Whenever I create a second div tag to hold the Form a space has appeared between it and the previous Div tag. Is there anything wrong with my CSS?

body {
 background-image: url(../images/body-bg.jpg);
 font-family: arial;
}

#header {
 background-image: url(../images/new-post-h.png);
 background-repeat: no-repeat;
 height: 124px;
 width: 850px;
 color: #ffffff;
 margin: 0em 0px;
}

#form-bg {
 background-image: url(../images/new-post-b.png);
 background-repeat: no-repeat;
 height: 500px;
 width: 850px;
 padding: 8px;
 margin: 0em 0px;
}

#new-form {
 height: 624px;
 width: 850;
 margin-left: auto;
 margin-right: auto;
}

Here is what keeps on happening:
http://i40.tinypic.com/j623i8.jpg

Answer 1

Two things:

1) From the looks of your image (assuming that it is 100% size, and what elements are your header, etc), your header background is only ~50px tall. However, you define the height as 124px in your CSS. You can’t stretch a background image with CSS (to my knowledge) so the image won’t fill the size of the element.

2) In your declaration for #new-form, add a unit to width. Otherwise, it won’t work as expected, and you’ll also get a parser error.