Div's Again

[Ini]

Ok,

http://virtuatv.net/land/

the box on the right i want it to be next to the left one

My CSS:

#commentstop {
    width:390px;
    height:45px;
    z-index: 1;
    background-color: #FFFFFF;
    position: relative;
    left: 516px;
}
#commentsmid {
    width:390px;
    height: auto;
    z-index:2;
    background-color: #FFFFFF;
    left: 516px;
    position: relative;
}
#commentsbot {
    width:390px;
    height:82px;
    z-index:3;
    background-image: url(images/smallbot.jpg);
    left: 516px;
    position: relative;

} 

My HTML

<div id="friendstop">Content</div>
<div id="friendsmid">hellooooo<br />
<br />
booooooo</div>
<div id="friendsbot"></div>
<div id="commentstop">Content</div>
<div id="commentsmid"></div>
<div id="commentsbot"></div>

Thanks +rep for help

Moved by Hitman (Forum Moderator) from Designing & Development: Please post in the correct forum next time, thanks.

[Klydo]

If you put each box in it's own overall container, such as your have for the friends box. If you put the top, middle and bottom divs into a global div with an ID/class as "friends" then make friends float: left; then so the same for the comments box but this time float: right;. See if that helps.

[kk.]

pretty much what klydo said.

get rid of the z-indexes and make a seperate box for the whole of the box. do this for both and float both left and make the very bottom div clear: both

[Ini]

If you put each box in it's own overall container, such as your have for the friends box. If you put the top, middle and bottom divs into a global div with an ID/class as "friends" then make friends float: left; then so the same for the comments box but this time float: right;. See if that helps.

Could you elaberate?

I sort of no what you mean, bit still a little confused.

[CharneHolly]

Your a div

Edited by --ss-- (Forum Super Moderator): Please do not be rude.

[Klydo]

Okay no idea why Hitman moved it here, as this isn't web design it's web coding, but still anyway...

Well basically at the moment you have;

<div id="friendstop">Content</div>
<div id="friendsmid">hellooooo<br />
<br />
booooooo</div>
<div id="friendsbot"></div>

First change that to;

<div id="friends">
<div id="friendstop">Content</div>
<div id="friendsmid">hellooooo<br />
<br />
booooooo</div>
<div id="friendsbot"></div>
</div>

That puts it in it's own container div. You then make it's CSS like so;

#friends {
float: left;
width: 390px;
}

Do the same for comments, but this time float: right; instead.

[--ss--]

You're using relative positioning with left/right values which isn't a good idea , use float tags instead .
Also put all your boxes into mini containers .

[Ini]

Okay no idea why Hitman moved it here, as this isn't web design it's web coding, but still anyway...

Well basically at the moment you have;

<div id="friendstop">Content</div>
<div id="friendsmid">hellooooo<br />
<br />
booooooo</div>
<div id="friendsbot"></div>

First change that to;

<div id="friends">
<div id="friendstop">Content</div>
<div id="friendsmid">hellooooo<br />
<br />
booooooo</div>
<div id="friendsbot"></div>
</div>

That puts it in it's own container div. You then make it's CSS like so;

#friends {
float: left;
width: 390px;
}

Do the same for comments, but this time float: right; instead.

Thanks for the help

Added exactly what you said and i got

http://virtuatv.net/land/ :S

[RolexSweep]

Your a div

Edited by --ss-- (Forum Super Moderator): Please do not be rude.

You're***

Edited by Hitman (Forum Moderator): Please don't post pointlessly.

[--ss--]

Thanks for the help

Added exactly what you said and i got

http://virtuatv.net/land/ :S

You will have to have a main container div around all the sub divs which contains the max width you want it to be , You can also you margin-left / margin-right to position the spacing between the divs about .