Side-by-side boxes?

Don't know why this isn't working but:
I have two boxes, each in their own container, then those two containers are in one big container. Instead of the two boxes beside eachother, one is underneath the other. +rep

Code:

---

main_container {
width: 900px;
margin: 0px auto;
}

.main_container .rightnow_container {
width: 529px;
float: left;
margin-top: 39px;
}

.main_container .rightnow_container .top {
background-image: url(http://x.com/youwhat/images/boxes/right_now/header.png);
width: 529px;
height: 37px;
}

.main_container .rightnow_container .middle {
width: 527px;
background-color: #FFFFFF;
border-left: 1px solid #d9d9d9;
border-right: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
}


.main_container .yourname_container {
width: 217px;
float: right;

}

.main_container .yourname_container .top {
background-image: url(http://x.com/youwhat/images/boxes/yourname/header.png);
width: 217px;
height: 37px;
}

.main_container .yourname_container .middle {
width: 215px;
background-color: #FFFFFF;
border-left: 1px solid #d9d9d9;
border-right: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
}

---

Would be better if you gave us an image.

My advice, don't use floats, try:

Code:

---

#div {
  margin-top: 10px;
  margin-left: 10px;

---

or

Code:

---

#div {
  position: absolute;
  top: 10px;
  left: 10px;

---

There's nothing wrong with floats, and as for the image, I can't.

Quote:

---

Originally Posted by BOX!

There's nothing wrong with floats, and as for the image, I can't.

---

Floats are not as effective or precise as what I recommended.

I'm not look for precise(ness?) I just want it to be general, box on the left and box on the right. You're going to have to learn to like floats sooner or later.

You would do it like this:

#leftbox {
float: left;
}
#rightbox {
float: right;
}

You can do as many as you want, as long as they fit in the 900px container.

The last box will always be float right

So say you have 10 boxes, each 100px wide, and the container is 1000px.

#1, 2, 3, 4, 5, 6, 7, 8, 9 = float: left;
#10 (last one) = float: right;

Then it is exactly 1000px with all those boxes, but they would be nearly on top of each other..

Hope you catch my drift!

Quote:

---

Originally Posted by Cushioned

You would do it like this:

#leftbox {
float: left;
}
#rightbox {
float: right;
}

You can do as many as you want, as long as they fit in the 900px container.

The last box will always be float right

So say you have 10 boxes, each 100px wide, and the container is 1000px.

#1, 2, 3, 4, 5, 6, 7, 8, 9 = float: left;
#10 (last one) = float: right;

Then it is exactly 1000px with all those boxes, but they would be nearly on top of each other..

Hope you catch my drift!

---

Wrong.
They should all float left, no need for one of them to float right.

Quote:

---

Originally Posted by HabbDance

Would be better if you gave us an image.

My advice, don't use floats, try:

Code:

---

#div {
  margin-top: 10px;
  margin-left: 10px;

---

or

Code:

---

#div {
  position: absolute;
  top: 10px;
  left: 10px;

---

---

Quote:

---

Originally Posted by Trinity

Wrong.
They should all float left, no need for one of them to float right.

---

True. Just how I learned :)

I've only had a quick look at the code, but I think it could be because you haven't left enough room for the borders. All browsers add the width of the border to the width of the box, so of you had a box with a width of 200 px and a 1px border around it it would be 102px.

All the boxes are big enough, including the main container that holds them both, when I put float:left; on both boxes the red still stays under the green one.