14 replies to this topic

[venomsnake]

im trying to put 3 sets of boxes, (top, middle, bottom) on the same line, then i want a anther set below the middle box set, and one under the right box set, heres an example, http://drowningforum...om/new4blue.jpg, and here is what i have so far, but its getting messed up. how can i move it over? http://gamingreloade...ew/cssindex.php

[d7x]

lets see ill break this down:

First Tutorial Categories:

Use the CSS code:

float: left;

Welcome and main:

float: left;

recent and affiliates:

float: right;

now on the footer put this code:

clear: both;

http://www.pixel2lif...showtopic=13350 - may give you some tips

[venomsnake]

thx, i tried floats, but it messed it up, didnt know i need the clear

edit: it messed it all up , check the first link

Edited by venomsnake, 15 October 2005 - 10:11 PM.

[d7x]

, so im guessing it worked for you? and the clear: both; just kinda fixes them

[venomsnake]

i just edited my other post lol,

but no, it didnt really work, check the link again

edit: my css page: http://gamingreloaded.com/wire%20wiredesig...ew/cssstyle.css

Edited by venomsnake, 15 October 2005 - 10:19 PM.

[d7x]

oh wait stupid me, well this may work but im not sure:

alright you have 3 sections ok. so left center right.

alright for all on the left put them in a div called "left" , for the center but a div for them called center, and for the right put em in a div for right.

for those 3 divs, put:

for the left div

float: left;

for the center div:

float: left;

for the right div:

float: right;

also if that still messes up try chaning the right to float: left; sometimes that works to, hopefully this will help you

[venomsnake]

ok, its better, but its still not right, the center ones wont go center

[d7x]

alright well ummmm try changing the center one to float: right; maybe?

edit: hell you may be able to take out the whole floats for the center, since there are 2 other ones defined in the code that it may just go into the unused spot

Edited by d7x, 15 October 2005 - 10:28 PM.

[venomsnake]

ok, i put the right div on the center parts, and i moved the right sets above the center sets, and now the center and right sets are good, but the left set doesnt come up all the way to line up

[d7x]

yea i see, i have this problem alot, really annoying

umm lets see

one is with margins...

ex:

margin-top: 5px;

or something like that, also, umm kinda seems like your content box needs to be pushed over to the right a little...

edit: err i really stick at helping ppl out on forums x.x easier for me to work on it myself sry this is taking kinda long

Edited by d7x, 15 October 2005 - 10:47 PM.

[venomsnake]

its np

ive been trying to mess with margins that i have, ill upload the newest pages, and maybe u can try it?

edit: uploaded

Edited by venomsnake, 15 October 2005 - 10:53 PM.

[d7x]

accually i know the problem, because you took out the center div in the css code its cause the left part to go down, i know this because im trying my own layout for a new version of my site.

gimme a sec and ill figure it out

[venomsnake]

ok thanks

do u have msn? i tried adding u, but i guess ur not on, it would be easier to talk over msn

[saferwaters]

Try:

Make three large columns...that are the basic outline of it. Make it:

#left {
float: left;
width: 25%;
}
#mid {
float: left;
width: 50%;
}
#right {
float: left;
width: 50%;
}

The important thing is they're all floated left. This provides the basic outline of the layout.

Then, use this sort of code for your content boxes:

div.box {
width: 90%;
background-color: #whatever;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
}

Now, putting it all together, we have:

<div id="left">
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div></div>

<div id="mid">
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div></div>

<div id="right">
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div></div>

This will ensure everything is kept inline, its all similar widths (different lengths for different content etc). If you need help making the headers for each box thingy, thats another div entirely, nested within the 'box' div...that can come later.

Hope it works.

[venomsnake]

we got it working, thanks tho