hello, I am using a template that was a 2 column and I wanted to make it a 3 column. The problem is; the 3rd column( right column) is pushed down just below the main content. what is wrong.. pelase help.. thanks html code below: _________________________________________________ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="name of the author." /> <meta name="keywords" content="key words ." /> <meta name="description" content="description of the main conents." /> <style> /*Styles for body.*/ body { margin: 0 auto; padding: 0; font: 76% Verdana, Helvetica, Tahoma, Arial, sans-serif; background: #f4f4f4 url(background.gif) top center repeat-y; color: #494949; } /*Styles for main content which will be wrapped to centere. */ #MainWrapper { background: #ffffff; color: #303030; margin: 0 auto; width: 800px; } /*Styles for the main header at the top. */ #Header { color:#ffffff; padding-top:12px; padding-bottom:12px; padding-left:20px; background-color: #FFFFFF; align-text: right; } #Header a { font-weight:normal; font-size:27px; text-decoration:none; background-color: #FFFFFF; color:#323232; } /*Styles for the main header menus. */ #HeaderMenus { color:#000000; height:1.2em; line-height:1.2em; font-family: Verdana, Helvetica, sans-serif; font-size: 1.2em; padding-left:11px; margin:0 0 10px 0; background-color: #7FA2CA; border-bottom:solid 2px #a9a9a9; } #HeaderMenus ul { padding: 0 0 0 0; margin: 0 0 0 0; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(127,162,202); font-weight: bold; } #HeaderMenus li { float:left; display: inline; list-style-type:none; } #HeaderMenus li a { display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 70%;} } #HeaderMenus .selected { color: #336699; text-decoration: none; background-color:inherit; } #HeaderMenus a:hover { background-color:inherit; color: #323232; text-decoration: none; } /*Styles for the contens that are displayes in side column. */ #SideContents { float:left; width:170px; color: #333300; padding:0 6px 0 7px; border-right: 1px solid #DDD; line-height:1.4em; background-color:#ffffff; height: 100%; } #SideContents h3 { color: #4D6E8F; text-align; center; font-size: 1.4em; margin: 0 auto; padding: 0 0 8px 0; background-color:inherit; } #SideContents p { font-size: 90%; text-align: justify: center; background-color:inherit; color: #333300; margin: 0 0 12px 0; } #SideContents a { text-decoration: none; background-color:inherit; color: #660000; } /*Styles for the contens that are displayes in RIGHT side column. */ #RightSide { clear: both; float:right; width:170px; margin-left: 10px; color: #333300; padding:0 6px 0 7px; line-height:1.4em; background-color:#ffffff; } #RightSide h3 { color: #4D6E8F; text-align; center; font-size: 1.4em; margin: 0 auto; padding: 0 0 8px 0; background-color:inherit; } #RightSide p { font-size: 90%; text-align: justify: center; background-color:inherit; color: #333300; margin: 0 0 12px 0; } #RightSide a { text-decoration: none; background-color:inherit; color: #660000; } /*Styles for the main contets in the page. */ #MainContent { margin: 0 255px 18px 185px; padding: 0 8px 0 10px; border-left: 1px solid #DDD; border-right: 1px solid #DDD; line-height: 1.6em; } #MainContent h2 { color:#000000; font-size: 1.5em; margin: 0 0 0.5em 0; background-color:inherit; text-align: left; } #MainContent p { color:#494949; text-align: justify; background-color:inherit; } #MainContent a { text-decoration: none; background-color:inherit; color: #000066; } #MainContent img { display:inline; color: inherit; background-color:inherit; border: 2px solid #79A3C1; } /*Styles for the page footer. */ #Footer { clear:both; margin: 0 auto; padding: 8px 0 2px 0; border-top: 1px solid #ddd; width: 760px; text-align: center; font-size: 0.9em; line-height: 1.6em; } #Footer a { color: #000099; background-color: inherit; text-decoration: none; } #Footer a:hover { text-decoration: underline; } --></style> <title>CSS 3 Column</title> </head> <body> <div id="MainWrapper"> <div id="Header">Hi There Whatever You Want</a></div> <div id="SideContents"> <h3 align="center">Left Articles</h3> <p></p> <h3>Regular Links</h3> <a href="http://en.wikipedia.org/wiki/Main_Page">Wikipedia</a><br/> </div> <div id="MainContent"> <h2>Intro to Design</h2> <p>affect to design. </p> </div> <div id="RightSide"> <h3 align="center">Right Articles</h3> <p><center></center></p> <p> <b>Firefox:</b> The best all-around alternative to IE. Great for power users who want to add functionality to the browser </p> <p> <b>Wikipedia:</b> The free web based encyclopedia that anyone can edit. Anyone can add and edit Wikipedia content via a Web browser. It receives about 50 million hits every day and its English-language version now has over half a million articles <a href="http://www.pcworld.com/reviews/article/0,aid,120763,pg,12,00.asp">...</a> </p> <h3>Regular Links</h3> <a href="http://www.creatingonline.com/webmaster/templates/">Creating Online</a><br/> <a href="http://en.crystalxp.net/">CrystalXP</a><br/> <a href="http://en.wikipedia.org/wiki/Main_Page">Wikipedia</a><br/> </div> <div id="Footer"> Copyright © 2005 . Design by <a href=""></a>. </div> </div> </body> </html>
Damn! I was going to tell you to delete the clear:both from Rightside and move the center div to start after the rightside div.