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
  • 132 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by 1337cookie

Dani AI

Generated

Two things are almost always at fault when one floated column “drops” below the others: (A) invalid/ignored CSS (syntax errors can make later rules vanish) and (B) the box model — your combined column widths plus borders/padding exceed the parent, so the last float wraps to the next line. , your markup/layout is fine conceptually; was right to push for consistent floats and to watch the border size, but the deeper fixes are: validate the stylesheet, float every column, and make the parent contain the floats.

Follow these repair steps in order:

  1. Scan the stylesheet for stray or unmatched } characters and run the CSS through a validator (this catches rules that never take effect).
  2. Make every column a floated block (don’t mix display:inline with floats). Floats need block-level widths to behave predictably.
  3. Ensure the sum of the three column widths plus any borders, padding and margins is less than the container width. Either reduce widths or switch to box-sizing: border-box so borders/padding are included in the declared width.
  4. Give the column container a clearfix (or overflow:auto) so it wraps the floats instead of collapsing.
  5. Remove rigid fixed heights if content is dynamic; prefer min-height or let content define height.

Small, practical example (use different widths to fit your layout):

.container { width:900px; overflow:auto; }
.col { float:left; box-sizing:border-box; padding:0; }
.col.left   { width:40%; }
.col.center { width:35%; }
.col.right  { width:25%; border:3px solid #fff; }
.clearfix::after { content:""; display:table; clear:both; }

Use browser dev tools to inspect computed widths and see which element forces the wrap: temporarily add visible background colors or outlines to each column. For reference on box-sizing and float behavior see box-sizing on MDN and float on MDN. For quick validation use the W3C CSS Validator.

Recommended Answers

All 3 Replies

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.