how to make my container appear correctly

I'm not sure what I am doing wrong here on this site of mine, but I hope to get some feedback on this.

But I have an issue;


I need my container that holds the sidebar and main content to appear. Unfortunately, it doesn't show up correctly.

/* ------------- content divisions --------------- */
#container {
  width: 800px;
  background-color: #333;
  padding: 20px auto;

}
	
#content {
   float: right;
   width: 570px;
   color: #000;
   line-height: 140%;
   text-align: left;
}

Code (markup):

 

looks fine to me.

 

You need for #container to enclose its float children.

#container {
  width: 800px;
  background-color: #333;
  padding: 20px auto;
  position: relative;
  [color=red]overflow: hidden;[/color]   /*[color=blue]add this line[/color]*/
  margin-top: 10px;
}

Code (markup):

Why the dark gray background with black text? Do you mean to give #container's children a different background color?

cheers,

gary