How can I get rid of this space?

I am currently working on the layout of a Web page only after you have inserted a tag div between the main content and what I call the popular instrument lessons, I see white space. I looked in the code and see no reason for this, and are short of ideas to solve the problem. Here is the page:

http://www.musiclessons2go.com/new_index.html

Here is my code in the css. Can someone tell me what I'm doing wrong or how to fix this?

{body
text-align: center;
margin: 0px;
padding: 0px;
background-image: url(jpgs/backgrounds/piano%2080.jpg);
background-position: top center;
background-attachment: fixed;
background-repeat: no-repeat;
do-family: Verdana, Geneva, without serif.
do-size: 14px;
}
{#wrapper}
background-color: #FFF;
text-align: left;
padding: 0px;
Width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
left margin: auto;
}
#header {}
background-color: #FFF;
margin: 0px;
padding: 0px;
height: 130px;
}
#maincontent {}
margin: 0px;
padding: 0px;
height: 300px;
background-color: # 9-9;
}
{#sidebarnav}
margin: 0px;
padding: 0px;
background-color: #E5ED42;
Width: 200px;
float: right;
height: 290px;
}
{#horizontalnav}
text-align: center;
margin: 0px;
padding: 0px;
height: 25px;
background-color: #74AACD;
}
{#appointmentlogin}
background-color: #FFF;
text-align: right;
height: 28px;
}
{#statesjumpMenu}
float: right;
top of the margin: 4px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
{#popularinstruments}
background-color: #93643B;
height: 260px;
do-size: 12px;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
do-family: Verdana, Geneva, without serif.
}
#footer {}
text-align: center;
margin: 0px;
padding: 0px;
height: 25px;
background-color: #0F0;

(1) given that I've already started my page with a different height defined for div tags, I can make that change

with a margin of top 0 in css? I don't mind that to be the case for all the

Tags of the page. I use the titles specifically for google SEO.

Then you should use

and

not

.  But yes, you can do it in CSS-

H1, h2, h3 {margin-top: 0 ;}}

(2) how to create a layout that allows me to see things in the correct position (I normally do not put text so close it will be outside the defined area) if I don't create heights (even if temporary) for different div tags? For example, I made sure to make my sidebar and maincontent section the same height so that when I created the div tags that would go under these sections, all line up properly (ie: the footer).

I think about evil?

Yes - you think about it incorrectly.  Allow containers to expand based on their content.  If you need boxes to look like they have the same height as main floating containers next, investigate the use of "false column" techniques (use Google for this expression).  And as for placing the text if close, just browse to your page that you have linked and increase the size of the text by a tick.  It is already beyond the container.

Read this article to get an idea on the best methods of layout-

http://www.apptools.com/examples/pagelayout101.php

Tags: Dreamweaver

Similar Questions

Maybe you are looking for