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

[Ini]

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 ;).
I have one, and i have width on 100% so that it strectches full page

Edit, i've aligned it now, but how do i get rid of the scroll bar at the bottom?

[Klydo]

No it's you're padding. On the #comments you have padding-right: 350px; remove that. Seriously if you use Firefox download this;

www.getfirebug.com

It will save you a lot of time when errors like this come up, as you can hover over the area thats causing problems and it shows it's HTML and CSS at the bottom of the screen. You can then edit inline to see if that's the problem :P

[Ini]

No it's you're padding. On the #comments you have padding-right: 350px; remove that. Seriously if you use Firefox download this;

www.getfirebug.com

It will save you a lot of time when errors like this come up, as you can hover over the area thats causing problems and it shows it's HTML and CSS at the bottom of the screen. You can then edit inline to see if that's the problem :P
Done that now its all the way over the right hand side :S

[Klydo]

Yeah which is what you wanted right?

[kk.]

if you want them in the middle, add another container with a width of about 800px and include that after the header. Then add;
margin-left: auto;
margin-right: auto;

Don't forget to close it

[Ini]

Yeah which is what you wanted right?
Yes but its too far.. i dont want the scroll bars on the bottom

[Ini]

Yes but its too far.. i dont want the scroll bars on the bottom
Sorry for double post - Thread Closed