Trouble with HTML & CSS

[Drummerpete]

I usually never have a problem with web design, but this is making me angry. XD

Here's a snippet of the code:
```
div#container
{
  width: 898px;
  background: #FFFFFF url("images/contentbg.gif") repeat-x;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  margin: 50px auto 0 auto;
  padding: 10px 10px;
}

div#menu
{
  width: 178px;
  margin: 0 20px 0 0;
}

div#content
{
  width: 500px;
  padding: 0 10px;
}
```
Now, here's the problem.
I want the menu & content side by side within the container.

As the code is, menu & content **are** in container.

When I add
float: left;
to menu, content moves over to the left BEHIND Menu.
Then, when I add float: left; to content, the both go side by side OUTSIDE container.

I really hope someone understands what I just said.
I also hope someone understands why the hell that's happening, because I don't.

[Bobosk]

Did you try adding```
clear: left;
```in the #content styling?

[Drummerpete]

@Bobosk:

> Did you try adding```
> clear: left;
> ```in the #content styling?

Yeah, it still buggered up.

I've fixed it now - I added
float: left;
to the menu and a 200px margin-left on the content.

[Lenton]

Put float:left; on both menu and content.

[Drummerpete]

@Lenton:

> Put float:left; on both menu and content.

I did.
They both went outside the container.

[Chief]

you could put a float:left on the one on the left, and a float:right on the one on the right, then make sure the containing div is large enough for both.

[Drummerpete]

@Chief:

> you could put a float:left on the one on the left, and a float:right on the one on the right, then make sure the containing div is large enough for both.

Like I said, I've already fixed it. XD