Side Box

[Lamez]

Hi guys I am wanting to put a side box on to my CSS sheet, but I am really lost on how about doing this. I want a left side box and a right one. Like a vertical box.

 

Here is my current CSS sheet

 

/* Copytight by James Little */
/*     www.lamezz.com       */

/* Background */
body 
{
background-image: url('img/bg.gif'); 
background-repeat: repeat-x; 
background-color: #0000fa; 
margin: auto; 
margin-top: 20px; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: x-small; 
width: 550px;
}

/* Wrapper */
div.wrapper
{
width: 550px;
margin: auto;
margin-top: 10px;
}

/* Logo */
div.logo
{
color: #FFFFFF; 
text-align: center;
background: url('img/logo.png');
border: 2px solid #41416f;
height: 150px;
width: 550px;
}

/* Menu */
div.menu
{	
background: #000000  url('img/menustrip.gif');
text-align: center;
width: 551px;
height: 31px;
padding-top: 5px;
border: 1px solid #41416f;
}
div.menu ul
{
margin: auto;
padding: 0px 2px 2px 2px;
list-style-type: none;
text-align: center;
width: 550px;		
line-height: 30px;
}
div.menu a
{
display: block;
color: #ffffff;
text-decoration: none;
}
div.menu li
{
margin: center;
background: url('img/menub.gif') repeat-x;
display: block;
float: left;
width: 100px;
padding: 6px 4px 8px 3px;
line-height: 14px;
text-align: center;
margin-right: 2px;
}
div.menu li:hover
{
background-image: url('img/linkhover.gif');
}
div.menu li.selected
{
background-image: url('img/linkhover.gif');
color: #FFFFFF;
text-decoration: none;
}

div.menu li.selected:hover
{
background-image : url('img/linkhover.gif');
}

/* spacer */
div.spacer
{
padding: 3px 0px 3px 0px;
}

/* Links */
a:link, a:visited, a:active  
{
COLOR: #41416f; text-decoration: none;
}
a:hover 
{
COLOR: #FFFFFF; text-decoration: underline;
}

/* headers */
h2
{
text-align: left;
text-decoration:underline;
color: #ffffff;
}
h3
{
text-align: center;
color #999999;
}
h1
{
margin-top: 50px;
text-align: center;
color #999999;
}

/* Boxes */
div.right
{
margin: 0px;
padding: 0px;
float: right;
text-align: right;
list-style: none;
width: 50%;
}
div.left
{
margin: 0px;
padding: 0px;
float: left;
text-align: left;
list-style: none;
width: 50%;
}
div.boxn
{
width: 530px;
height: 150px;
margin-top: 10px;
background-color: #000000;
padding: 10px;
border: 1px solid #41416f;
color: #ffffff;
}
div.boxa
{
width: 530px;
height: 150px;
margin-top: 10px;
background-color: #000000;
padding: 10px;
border: 1px solid #41416f;
color: #ffffff;
}
div.box
{
width: 530px;
margin-top: 10px;
background-color: #000000;
padding: 10px;
border: 1px solid #41416f;
color: #ffffff;
}
div.nambox
{
width: 155px;
margin-top: 10px;
background-color: #000000;
padding-left: 10px;
padding: 10px;
border: 1px solid #41416f;
color: #ffffff;
}
div.footer
{
text-align: center;
width: 530px;
margin-top: 10px;
background-color: #000000;
padding: 10px;
border: 1px solid #41416f;
color: #FFFFFF;
}

/*Colums*/
ul.leftcol
{
margin: 0px;
padding: 0px;
float: left;
text-align: left;
list-style: none;
width: 50%;
}
ul.rightcol
{
margin: 0px;
padding: 0px;
float: right;
text-align: right;
list-style: none;
width: 50%;
}

 

If you want to see what it looks like now you can view my site here www.lamezz.com/!_index.php login as

 

Username: test

Password: test

 

the members page is where I want the box, please help me I am lost.

[moberemk]

The username/password combination you gave doesn't work. But if you want them side-by-side, try making the widths 49% each and floating them both left-see if that helps.

[Lamez]

I know I am having some login troubles my self, its rather annoying, thanks for the help I will give that a shot.

 

here is my login trouble in case you are interested

 

http://www.phpfreaks.com/forums/index.php/topic,156762.0.html