geoldr Posted August 10, 2008 Share Posted August 10, 2008 Hey all, so I am a PHP coder, not a HTML / CSS designer. I need some help adding another column to my website. Right now it has a column on the right. You can check out my site at www.bayareahangout.com But yeah, I want to add another column to the left. So its like Left>Page Content>Right Here is the CSS html {min-height: 100%;} * { margin: 0; padding: 1; } a {color: #963;} a:hover {color: #C60;} body { background: #CCD8E0 url(../../images/theme/bg.jpg) repeat-x left bottom; color: #444; font: normal 62.5% Tahoma,sans-serif; } p,code,ul {padding-bottom: 1.2em;} li {list-style: none;} h1 { font: normal 1.8em Tahoma,sans-serif; margin-bottom: 4px; } code { background: #FFF; border: 1px solid #EEE; border-left: 6px solid #C1CAD3; color: #666; display: block; font: normal 1em Tahoma,sans-serif; line-height: 1.6em; margin-bottom: 12px; padding: 8px 10px; white-space: pre; } blockquote { background: url(../../images/theme/quote.gif) no-repeat; display: block; font-weight: bold; padding-left: 28px; } h1,h2,h3 {padding-top: 6px;} /* misc */ .clearer {clear: both;} .left {float: left;} .right {float: right;} /* structure */ .container { background: #FFF; font-size: 1.2em; margin: 0 auto; padding: 0 10px 10px; width: 780px; } /* header */ .top { /*background: url(img/clouds.gif) repeat-x;*/ padding: 50px 10px 0; } /* title */ .header { background: #FFF; font-size: 1.2em; height: 150px; margin: 0 auto; padding: 10px 10px 5px; width: 780px; } .header .left, .header .right { background: #A4A4A0; color: #FFF; height: 150px; } .header .left { background: #B3C2C7 url(../../images/theme/header2.jpg) no-repeat; font: normal 2.8em "Trebuchet MS",sans-serif; line-height: 150px; text-align: center; width: 564px; } .header .right { overflow: auto; width: 212px; } .header .right p,.header .right h2 {padding: 0 16px;} .header .right h2 {padding-top: 16px; font: normal 1.6em "Trebuchet MS",sans-serif;} /* navigation */ .navigation { background: #D9E1E5 url(../../images/theme/nav.gif); border: 1px solid #DFEEF7; border-color: #DFEEF7 #CFDEE7; height: 41px; } .navigation a { background: #D9E1E5 url(../../images/theme/nav.gif); border-right: 1px solid #AFBEC7; color: #456; display: block; float: left; font: bold 1.1em sans-serif; line-height: 41px; padding: 0 20px; text-decoration: none; } .navigation a:hover {background-position: left bottom; color: #234;} /* main */ .main { border-top: 4px solid #FFF; background: url(../../images/theme/bgmain.gif) repeat-y; } /* sub navigation */ .sidenav { float: right; width: 210px; } .sidenav h2 { color: #5A5A43; font-size: 1em; line-height: 30px; margin: 0; padding-left: 12px; } .sidenav ul { padding: 0; border-top: 1px solid #EAEADA; } .sidenav li {border-bottom: 1px solid #EAEADA;} .sidenav li a { font-size: 1.1em; color: #554; display: block; padding: 8px 0 8px 5%; text-decoration: none; width: 95%; } .sidenav li a:hover { background: #F0F0EB; color: #654; } /* content */ .content { float: left; margin: 10px 0; padding: 0 16px; width: 531px; } .content .descr { color: #664; font-size: 0.9em; margin-bottom: 6px; } .content li { list-style: url(../../images/theme/li.gif); margin-left: 18px; } .content p {font-family: "Lucida Sans Unicode",sans-serif;} /* footer */ .footer { background: url(../../images/theme/bgfooter.gif) repeat-x; color: #FFF; font: bold 1em sans-serif; line-height: 39px; text-align: center; } .footer a,.footer a:hover {color: #FFF;} And here is a template file <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <meta name="description" content="description"/> <meta name="keywords" content="keywords"/> <meta name="author" content="George Babichev"/> <link rel="stylesheet" type="text/css" href="theme/style.css" media="screen"/> <title>BayAreaHangout.com</title> </head> <body> <div class="top"> <div class="header"> <div class="left"> </div> <div class="right"> <h2>Welcome!</h2> <p>BayAreahangout.com is a great place to meet new people, hang out, and just have fun!</p> </div> </div> </div> <div class="container"> <div class="navigation"> <a href="../index.php">Home</a> <a href="../forum_index.php">Forums</a> <a href="../blog_index.php">Blogs</a> <a href="../memberlist.php">Memberlist</a> <a href="../about.php">About Us</a> <div class="clearer"><span></span></div> </div> <div class="main"> <div class="content"> <Main page content </div> <div class="sidenav"> </div> <div class="clearer"><span></span></div> </div> <div class="footer"> BayAreahangout.com </div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/118975-add-another-column-to-my-page/ Share on other sites More sharing options...
MasterACE14 Posted August 10, 2008 Share Posted August 10, 2008 basically you just do something like this: #leftcolumn { float: left; } #content { float: left; } #rightcolumn { float: left; } that way they push each other from the right to the left. leftcolumn < content < rightcolumn you put them on the page like so: <div id="leftcolumn"></div> <div id="content"></div> <div id="rightcolumn"></div> Link to comment https://forums.phpfreaks.com/topic/118975-add-another-column-to-my-page/#findComment-612669 Share on other sites More sharing options...
haku Posted August 10, 2008 Share Posted August 10, 2008 The above method will work with fixed-width colums. But if you want to have the middle column to be a fluid width, this method can work well: http://www.alistapart.com/articles/holygrail Link to comment https://forums.phpfreaks.com/topic/118975-add-another-column-to-my-page/#findComment-612692 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.