Member Avatar for pasamike

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
  • 116 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by 1337cookie
Member Avatar for 1337cookie

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

Member Avatar for pasamike

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.

Member Avatar for 1337cookie

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.