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.

What do you mean?

Quote:

---

Originally Posted by BOX!

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.

---

Post a screenshot or the HTML code.

Lol your main container is 900 px and the rest of your containers are over 1000 so it's bound to move under isn't it..

Try this:

HTML Code:

---

<html>
<head>

<title>Your Title</title>

<style type="text/css">

#container {
 width: 900px;
 margin: auto;
 overflow: hidden;
}

.box {
 width: 448px;
 background: #FFFFFF;
 border: 1px solid #D9D9D9;
 float: left;
 overflow: hidden;
}

</style>

</head>
<body>

<div id="container">

 <!-- Left -->
 <div class="box">
 Blah Blah Blah
 </div>
 <!-- /Left -->

 <!-- Right -->
 <div class="box">
 Blah Blah Blah
 </div>
 <!-- /Right -->

</div>

</body>
</html>

---

I think that's what you mean.

Quote:

---

Originally Posted by HabbDance

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

---

This is because you never use wrappers. Try them ;)

Quote:

---

Originally Posted by Excellent2

Lol your main container is 900 px and the rest of your containers are over 1000 so it's bound to move under isn't it..

---

No they're not, one box is 519px wide the other is 217px.

But you're using containers in a container and you've set the MAIN container to 900 px?

Don't worry about it anymore, I forgot the "." before the class name, just a mistake.