0

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:

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background-color:#432d20;
}
#wrapper { 
 margin: 0 0;
 width: 900px;
 padding: 0px;
}
#index_content { 
 background-color : #8b5733;
 border: 0px solid #ccc;
 margin: 0px 0px 0px 47px;
 padding: 0px;
 height: 400px;
 width: 825px;
 float: left;
}
#main_nav {
 color: #333;
 width: 900px;
 float: left;
 padding: 0px;
 border: 0px;
 margin: 0px 0px 0px 0px;
 height: 92px;
 background-image:url(images/main_menu.jpg);
}
}
#flash {
 width: 900px;
 float: left;
 padding: 0px;
 border: 0px;
 height: 291px;
 margin: 0px 0px 0px 0px;
}
}
#listen_online {
 width: 900px;
 float: left;
 height: 49px;
 background-image:url(images/listen_bg.gif);
}
#leftcolumn { 
 padding: 0px;
 height: 400px;
 width: 326px;
 float: left;
}
#centercolumn { 
 height: 400px;
 width: 256px;
 display: inline;
}
#rightcolumn { 
 border: 3px solid #fff;
 margin: 0px 0px 0px 0px;
 padding: 0px;
 height: 400px;
 width: 200px;
 display: inline;
}
#footer { 
 width: 850px;
 clear: both;
 border: 0px solid #ccc;
 margin: 0px 0px 0px 50px;
 padding: 0px;
}

Asp:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="font.css" />
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- MAIN MENU -->
  <div id="main_nav">
<!--#include file="main_nav.html"-->
  </div>
  <div id="flash">
<!-- MAIN FLASH MOVIE-->
<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">
      <param name="movie" value="flash files/main.swf">
      <param name="quality" value="high">
      <param name="wmode" value="opaque">
      <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>
    </object>
  </div> 
<!-- END MAIN MENU / FLASH -->
<div id="listen_online">
<table width="508" border="0" cellspacing="0" cellpadding="0">
      	<tr>
        <td width="210" align="right" class="listenonline">Latest Message:<br>
          <span class="listenonline_sub">Speaker:</span></td>
        <td width="187" class="listenonline">&quot;Taste The Grace of Silence&quot;<br>
          &nbsp;<span class="listenonline_sub">Pastor Brent </span></td>
        <td width="111" class="listenonline"><a href="listenonline.asp"><img src="images/playbutton.jpg" width="100" height="32" border="0"></a></td>
      	</tr>
    	</table>
  </div>
<div id="index_content">  
<!-- LEFT COLUMN -->
<div id="leftcolumn">
  <img src="images/kingdomassignment.gif" alt="" width="326" height="129" />
  <img src="images/freedomfest.jpg" alt="" width="326" height="129" />
  <img src="images/currentseries.gif" alt="" width="326" height="129" />
  </div>
  
<!-- CENTER COLUMN -->
<div id="centercolumn" class="servicetimes">
  <img src="images/mediaspotlight.jpg" alt="" width="234" height="235" /><br />
  	<strong>Service Times:</strong><br>
    Saturdays 6:00pm<br>
    Sundays 9:00 &amp; 10:45 am<br />
    <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>
</div>
  
<!-- RIGHT COLUMN-->
<div id="rightcolumn">RIGHT COLUMN</div>
</div>

<!-- FOOTER -->
<div id="footer">
  <!--#include file="footer.html"-->
</div>
</div>
<!-- End Wrapper -->
</body>
</html>
2
Contributors
3
Replies
4
Views
8 Years
Discussion Span
Last Post by 1337cookie
0

float leftcolumn, centercolumn , and rightcolumn to the left.
Without rewriting your code to the way i would do it this should work fine.

0

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.

0

reduce rightcolumn's height and width by 6px. The borders and margins get added to the outside of your div's width.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.