CSS

[F32]

Ok, I'm a noob at CSS and now I want to experiment and self-teach myself.

How do I make a right and left column?

I have this:

http://www.xeoro.net/test/

+rep.

[Frog!]

Wouldn't you use layers/divs?

[F32]

I am ?

[Frog!]

I am ?

I'm a noob at CSS... :)

[Drompo]

<div align="right">
<div align="left">

[Frog!]

<div align="right">
<div align="left">
Sends it on a new line Ash.

[myke]

<div style="position: absolute; left: AMOUNT OF PX AWAY FROM LEFT;"></div>


Edit that to help you like top: 0px; and left: 0px; and right: 0px;

[F32]

What's that in pure css?

[Blob]

It would be
<div id="box"></div>

<style type="text/css">
#box{
position: absolute;
left: Amount of pixels like Myke said;
}
</style>

[F32]

http://xeoro.net/test

:s

[R]

try w3schools quite gd.

[F32]

try w3schools quite gd.
I prefer independent learning.

[timROGERS]

never ever ever ever use absolute positioning :O It's bad :P

[YouFail]

Seriously?! Noobs pls :P

Make a container and make left and right.



#cont {
width: 100&#37;;
overflow: hidden;
}

#left {
width: 50%;
float: left;
}

#right {
width: 40%;
float: right;
}




<div id="container">

<div id="left">RICHARD OWNS PLS</div>
<div id="right">TIS TRUE PLS</div>


:)

[F32]

Thanks rich. <3

+rep to everyone else as well.

[ScottDiamond]

Use containers. :)

[Mentor]

Seriously?! Noobs pls :P

Make a container and make left and right.



#cont {
width: 100%;
overflow: hidden;
}

#left {
width: 50%;
float: left;
}

#right {
width: 40%;
float: right;
}




<div id="container">

<div id="left">RICHARD OWNS PLS</div>
<div id="right">TIS TRUE PLS</div>


:)



<div id="container">

<div id="left">RICHARD OWNS PLS</div>
<div id="right">TIS TRUE PLS</div>

</div>


RICHARD forgot to close his container div.

[F32]

He did indeed.

[:

[YouFail]

<div id="container">

<div id="left">RICHARD OWNS PLS</div>
<div id="right">TIS TRUE PLS</div>

</div>
RICHARD forgot to close his container div.

Im truely sorry. Silly error. I'll go kill myself pls :P

Ty Mentor

[QuickScriptz]

Well.... for the code above... Floating the right hand side column is completely unessecary, as long as you set the right hand side margin to wider than the left column then it will automatically align itself beside it. So like example.....


#cont {
width: 100%;
overflow: hidden;
}

#left {
width: 50%;
float: left;
}

#right {
margin: 0 0 0 52%;
width: 40%;
}

So just to sum it up.... The left column is 50% wide, so we set the left margin of the right column to 52% that way it won't run into the left column and will align itself beside it.

Note: the current columns don't line up beside each other in Maxthon/IE 6.