HTML and CSS RSS HTML and CSS RSS

CSS - 3 Column Layout Problem...

Thread Solved

•
•
Join Date: Jun 2009
Posts: 2
Reputation: pasamike is an unknown quantity at this point 
Solved Threads: 0
pasamike pasamike is offline Offline
Newbie Poster

CSS - 3 Column Layout Problem...

 
0
  #1
Jun 15th, 2009
I was kinda "given" the task of taking over a website which is something i have not done in a while. I have never gotten into CSS beyond styles for text before so i am doing this by trial and error. Anyways, I have a site designed and online. However I am now wanting to convert it to a CSS layout and all content will be dynamic. Anyways, on the main page, I need a section with 3 columns. The first two appear fine, the third (right column) starts a lot lower vertically than it should. What am I doing wrong?

CSS Sheet:
HTML and CSS Syntax (Toggle Plain Text) 
  1. * { padding: 0; margin: 0; }
  2.  
  3. body {
  4.  font-family: Arial, Helvetica, sans-serif;
  5.  font-size: 13px;
  6.  background-color:#432d20;
  7. }
  8. #wrapper { 
  9.  margin: 0 0;
  10.  width: 900px;
  11.  padding: 0px;
  12. }
  13. #index_content { 
  14.  background-color : #8b5733;
  15.  border: 0px solid #ccc;
  16.  margin: 0px 0px 0px 47px;
  17.  padding: 0px;
  18.  height: 400px;
  19.  width: 825px;
  20.  float: left;
  21. }
  22. #main_nav {
  23.  color: #333;
  24.  width: 900px;
  25.  float: left;
  26.  padding: 0px;
  27.  border: 0px;
  28.  margin: 0px 0px 0px 0px;
  29.  height: 92px;
  30.  background-image:url(images/main_menu.jpg);
  31. }
  32. }
  33. #flash {
  34.  width: 900px;
  35.  float: left;
  36.  padding: 0px;
  37.  border: 0px;
  38.  height: 291px;
  39.  margin: 0px 0px 0px 0px;
  40. }
  41. }
  42. #listen_online {
  43.  width: 900px;
  44.  float: left;
  45.  height: 49px;
  46.  background-image:url(images/listen_bg.gif);
  47. }
  48. #leftcolumn { 
  49.  padding: 0px;
  50.  height: 400px;
  51.  width: 326px;
  52.  float: left;
  53. }
  54. #centercolumn { 
  55.  height: 400px;
  56.  width: 256px;
  57.  display: inline;
  58. }
  59. #rightcolumn { 
  60.  border: 3px solid #fff;
  61.  margin: 0px 0px 0px 0px;
  62.  padding: 0px;
  63.  height: 400px;
  64.  width: 200px;
  65.  display: inline;
  66. }
  67. #footer { 
  68.  width: 850px;
  69.  clear: both;
  70.  border: 0px solid #ccc;
  71.  margin: 0px 0px 0px 50px;
  72.  padding: 0px;
  73. }

Asp:
HTML and CSS Syntax (Toggle Plain Text) 
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title></title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <link rel="stylesheet" type="text/css" href="styles.css" />
  6. <link rel="stylesheet" type="text/css" href="font.css" />
  7. </head>
  8. <body>
  9. <!-- Wrapper -->
  10. <div id="wrapper">
  11. <!-- MAIN MENU -->
  12.   <div id="main_nav">
  13. <!--#include file="main_nav.html"-->
  14.   </div>
  15.   <div id="flash">
  16. <!-- MAIN FLASH MOVIE-->
  17. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="900" height="291">
  18.       <param name="movie" value="flash files/main.swf">
  19.       <param name="quality" value="high">
  20.       <param name="wmode" value="opaque">
  21.       <embed src="flash files/main.swf" quality="high" wmode="opaque" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="900" height="291"></embed>
  22.     </object>
  23.   </div> 
  24. <!-- END MAIN MENU / FLASH -->
  25. <div id="listen_online">
  26. <table width="508" border="0" cellspacing="0" cellpadding="0">
  27.       	<tr>
  28.         <td width="210" align="right" class="listenonline">Latest Message:<br>
  29.           <span class="listenonline_sub">Speaker:</span></td>
  30.         <td width="187" class="listenonline">&quot;Taste The Grace of Silence&quot;<br>
  31.           &nbsp;<span class="listenonline_sub">Pastor Brent </span></td>
  32.         <td width="111" class="listenonline"><a href="listenonline.asp"><img src="images/playbutton.jpg" width="100" height="32" border="0"></a></td>
  33.       	</tr>
  34.     	</table>
  35.   </div>
  36. <div id="index_content">  
  37. <!-- LEFT COLUMN -->
  38. <div id="leftcolumn">
  39.   <img src="images/kingdomassignment.gif" alt="" width="326" height="129" />
  40.   <img src="images/freedomfest.jpg" alt="" width="326" height="129" />
  41.   <img src="images/currentseries.gif" alt="" width="326" height="129" />
  42.   </div>
  43.  
  44. <!-- CENTER COLUMN -->
  45. <div id="centercolumn" class="servicetimes">
  46.   <img src="images/mediaspotlight.jpg" alt="" width="234" height="235" /><br />
  47.   	<strong>Service Times:</strong><br>
  48.     Saturdays 6:00pm<br>
  49.     Sundays 9:00 &amp; 10:45 am<br />
  50.     <a href="http://maps.google.com/maps?hl=en&um=1&ie=UTF-8&cid=0,0,16336706596796542677&fb=1&split=1&gl=us&dq=1126+wagner+dr.+sevierville+tennessee&daddr=1126+Wagner+Dr,+Sevierville,+TN+37862&geocode=5523148836306267293,35.861450,-83.530430&ei=dzTUSeWwHtCPmAeu3oztDg&sa=X&oi=local_result&resnum=1&ct=directions-to"target="_blank"><img src="images/map.jpg" width="225" height="79" border="0"></a>
  51. </div>
  52.  
  53. <!-- RIGHT COLUMN-->
  54. <div id="rightcolumn">RIGHT COLUMN</div>
  55. </div>
  56.  
  57. <!-- FOOTER -->
  58. <div id="footer">
  59.   <!--#include file="footer.html"-->
  60. </div>
  61. </div>
  62. <!-- End Wrapper -->
  63. </body>
  64. </html>
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 9
Reputation: 1337cookie is an unknown quantity at this point 
Solved Threads: 2
1337cookie 1337cookie is offline Offline
Newbie Poster

Re: CSS - 3 Column Layout Problem...

 
0
  #2
Jun 15th, 2009
float leftcolumn, centercolumn , and rightcolumn to the left.
Without rewriting your code to the way i would do it this should work fine.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 2
Reputation: pasamike is an unknown quantity at this point 
Solved Threads: 0
pasamike pasamike is offline Offline
Newbie Poster

Re: CSS - 3 Column Layout Problem...

 
0
  #3
Jun 15th, 2009
well that seemed to improve the situation some... but instead of the third column being located to the right, it is located under the center column... i may revist the way this is written... I am still learning (in a hurry) lol... I love learning new things but, this is one of those where i need a solution and learn why it works later... lol.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 9
Reputation: 1337cookie is an unknown quantity at this point 
Solved Threads: 2
1337cookie 1337cookie is offline Offline
Newbie Poster

Re: CSS - 3 Column Layout Problem...

 
0
  #4
Jun 15th, 2009
reduce rightcolumn's height and width by 6px. The borders and margins get added to the outside of your div's width.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC