Beauty In Design Community
Welcome, Guest
Please Login or Register.
Lost Password?
Beauty In Design Community Community Forums Tutorials
how to make a 3 column css template... (1 viewing)
_GEN_GOTOBOTTOM Post Reply

TOPIC: how to make a 3 column css template...
#205
rw1 (User)
Fresh Boarder
Posts: 2
graphgraph
how to make a 3 column css template... 2008/09/19 08:29  
hello,

great tutorial on creating a css template - im learning HEAPS! thank you!

the template i want to make however would have 3 columns and so i need to know how to have a left column, a center column and a right column.

im mucking around with float: right for the right column but it doesn't seem to be working. any suggestions anyone had would be much appreciated.

thank you!

ps and the next thing i will want to do is make the left and right columns collapsible so if anyone had any leads on doing that (a link or something?) that would be great, thank you!
  The administrator has disabled public write access.
#206
rw1 (User)
Fresh Boarder
Posts: 2
graphgraph
Re:how to make a 3 column css template... 2008/09/19 08:57  
this is the index i am using:

Code:

 <body>
<div id="container">
<div id="tag">Tag</div>
<div id="header">Header</div>
<div id="left">Left</div>
<div id="main_content">Main Content</div>
<div id="right">Right</div>
<div id="login">Login</div>
<div id="menu1">Menu1</div>
<div id="menu2">Menu2</div>
<div id="footer">Footer</div>
</div>
</body>



and this is the css:

Code:

 
body {
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
margin: 0 auto;
text-align: center;}

#container {
border: 4px #99968F solid;
width:587px;
height: 724px;
margin: 20px auto;}

#tag {
text-align: left;
color: #64F81B;
font-family:Arial, Helvetica, sans-serif; 
font-size:12px;
background-color: #000000;}

#header {
width: 587px;
height: 135px;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;}

#left {
text-align: left;
width: 202px;
height: 287px;
margin: 0 auto;
float: left;
padding-top: 39px;
background-image: url(../images/left_bg.jpg);
background-repeat: no-repeat;}

#main_content {
margin-left: 202px;
padding-top: 25px;
width: 183px;
height: 287px;
background-image: url(../images/main_content_bg.jpg);
margin: 0 auto;}

#right {
float: left;
height: 287px;
margin: 0 auto;
margin-left: 385px;
padding-top: 39px;
width: 202px;
background-image: url(../images/right_bg.jpg);}

#login {
clear: both;
width: 587px;}

#menu1 {
clear: both;
width: 587px;}

#menu2 {
clear: both;
width: 587px;}

#footer {
clear: both;
width: 587px;}



Post edited by: rw1, at: 2008/09/19 08:58
  The administrator has disabled public write access.
_GEN_GOTOTOP Post Reply
© Copyright 2007 Best of Joomla, Powered by FireBoardget the latest posts directly to your desktop
Dorona Brown 1.0 by Best of Joomla
Contact Information