ID not stayinh within container? :-(

[Nerdygeek]

I've created a basic CSS layout and have gotten so far the ended up stuck.

The next part that I add to the layout breaks off into it's own new container leaving a horizontal border break between it and the top container, the container I was hoping would wrap around the whole site.

Here is the CSS, pointers are appreciated.

Thank you.

.container {
width: 675px;
margin: auto;
background-color: #ffffff;
border: 1px #CFECEC solid;
height: 100%;
padding-top: 3px;
padding-left: 11px;
padding-right: 11px;
}

#headline {

width: 100%;
text-align: center;

}

.h1 {
font-color: #00000;
font-size: 3.5em;
}

#subbheadline {
width: 100%;
text-align: center;
}

strong {
color: #EE3B3B;
font-size: 1.3em;
text-decoration: underline;
}

strong.subheadline {
color: black;
text-decoration: none;
}

strong.subsubheadline {
color: black;
text-decoration: none;
}

.container #form { /*This is where it breaks */
float: right;

}

Thank you.

[Nerdygeek]

OOo I found clear: both works.

I had to insert an empty div id at the bottom to make the outer conatiner go around the whole website.

I wonder though is there an another way that would mean I wouldn't need an empty id div in the HTML?

Glad I solved it all the same.