Side-by-side boxes? [Archive]

wsg14

29-10-2008, 11:24 PM

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

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;
}

HabbDance

29-10-2008, 11:33 PM

Would be better if you gave us an image.

My advice, don't use floats, try:

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

or

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

wsg14

29-10-2008, 11:39 PM

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

HabbDance

29-10-2008, 11:46 PM

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.

wsg14

30-10-2008, 12:31 AM

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.

Cushioned

30-10-2008, 02:40 AM

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!

Trinity

30-10-2008, 02:54 AM

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.

Cushioned

30-10-2008, 03:10 AM

Would be better if you gave us an image.

My advice, don't use floats, try:

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

or

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

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

True. Just how I learned :)

Decode

30-10-2008, 10:05 AM

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.

wsg14

30-10-2008, 12:27 PM

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.

friday

30-10-2008, 12:27 PM

What do you mean?

Decode

30-10-2008, 02:29 PM

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.

Excellent2

30-10-2008, 02:35 PM

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..

Glasses

30-10-2008, 03:29 PM

Try this:

<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">


<div class="box">
Blah Blah Blah
</div>



<div class="box">
Blah Blah Blah
</div>


</div>

</body>
</html>
I think that's what you mean.

Meti

30-10-2008, 08:34 PM

Floats are not as effective or precise as what I recommended.
This is because you never use wrappers. Try them ;)

wsg14

30-10-2008, 08:55 PM

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.

Excellent2

30-10-2008, 09:18 PM

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

wsg14

30-10-2008, 09:20 PM

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