Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Middle column content gets pushed below the middle column.

    Hello everyone,

    I have been trying to figure this problem out for sometime now. I am new to CSS, and self-taught...so just a beginner here. Hopefully someone can help me out here.

    So in one part of my site (unpublished, so I don't have a link) I have a three column CSS layout. All the other columns in my layout work amazing (header, content, footer, etc.) but on this 3 column part, when I type information into the middle column the content gets pushed below this middle column. I have read about other similar problems but each solution does not seem to work (fixing padding/margins, creating another wrapper div just for the 3 columns). I have run out of ideas since this problem occurs in Firefox, Safari, Opera, IE, etc. Below is my code and I have made the three columns part in blue.

    CSS:
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	background-color: #212a33;
    	color: #000;
    }
    
    html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	text-align: right;
    	font-size: 12pt;
    	color: #000;
    }
    
    #wrapper { 
    	width: 900px;
    	background-color: #d6d6d6;
    	margin:10px auto;
    	border:1px solid #000;
    	  -webkit-border-radius: 5px;    /* for Safari */
        -moz-border-radius: 5px;       /* for Firefox */
    }
    
    #content p {
    	margin: 10px 10px 10px 10px;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	text-align: left;
    	font-size: 12pt;
    }
    
    .leftimage {
    	float:left;
    	margin: 0 10px 10px 0;
    	border: 0px solid #000;
    	margin-right: 20px;
    }
    
    .rightimage {
    	float:right;
    	margin: 0 0 10px 10px;
    	border: 0px solid #000;
    }
    
    #footer {
    	background-color: #000;
    	padding:40px;
    	clear:both;
    	width: 820px;
    		  -webkit-border-radius: 5px;    /* for Safari */
        -moz-border-radius: 5px;       /* for Firefox */
    }
    
    #topcol {
    	margin: 10px 10px 10px 10px;
    	float:left;
    	width: 170px;
    	height: 63px;
    	background-image:url(logos/plainpdclogo.jpg);
    	background-repeat:no-repeat;
    	  -webkit-border-radius: 5px;    /* for Safari */
        -moz-border-radius: 5px;       /* for Firefox */
    }
    
    #tophorizrow {
    	margin: 10px 10px 0px 10px;
    	width: 690px;
    	height: 25px;
    	float:right;
    	background-color: #d6d6d6;
    	background-position:right;
    	  -webkit-border-radius: 5px;    /* for Safari */
        -moz-border-radius: 5px;       /* for Firefox */
    	
    }
    
    #topnav {
    	margin: 4px 10px 10px 10px;
    	width: 690px;
    	height: 33px;
    	float:right;
    	background-color: #000;
    	background-position:right;	
    	  -webkit-border-radius: 5px;    /* for Safari */
        -moz-border-radius: 5px;       /* for Firefox */
    }
    
    #bottomcol {
    	float:left;
    	margin: 0 690px 10px 10px;
    	width: 170px;
    	height:200px;
    	background-color:#000;
    	  -webkit-border-radius: 5px;    /* for Safari */
        -moz-border-radius: 5px;       /* for Firefox */
    }
    
    #bottomcolredtop {
    	float:left;
    	margin: 83px 690px 10px 10px;
    	position:absolute;
    	width: 170px;
    	height:25px;
    	background-color: #900;
    	  -webkit-border-radius: 5px;    /* for Safari */
        -moz-border-radius: 5px;       /* for Firefox */
    }
    
    #bottomcolredtopb {
    	float:left;
    	margin: 258px 690px 10px 10px;
    	position:absolute;
    	width: 170px;
    	height:25px;
    	background-color: #900;
    	  -webkit-border-radius: 5px;    /* for Safari */
        -moz-border-radius: 5px;       /* for Firefox */
    }
    
    #leftcol {
    	float:left;
    	margin: 0 690px 10px 10px;
    	width: 170px;
    	height:200px;
    	background-color:#000;
    	  -webkit-border-radius: 5px;    /* for Safari */
        -moz-border-radius: 5px;       /* for Firefox */
    }
    
    #rightcol {
    	float:right;
    	margin: 83px 0px 10px 490px;
    	position: absolute;
    	width: 400px;
    	height: 200px;
    	  -webkit-border-radius: 5px;    /* for Safari */
        -moz-border-radius: 5px;       /* for Firefox */
    }
    
    #middlecol {
    	margin: 83px 0 10px 200px;
    	width: 291px;
    	height: 200px;
    	background-color: #FFF;
    		  -webkit-border-radius: 5px;    /* for Safari */
        -moz-border-radius: 5px;       /* for Firefox */
    }
    
    /* Root = Horizontal, Secondary = Vertical */
    ul#navmenu-h {
      margin: 0;
      border: 0;
      padding: 0px;
      width: 600px; /*For KHTML*/
      list-style: none;
      height: auto;
    }
    
    ul#navmenu-h li {
      margin: 0;
      border: 0 none;
      padding: 3px;
      float: left; /*For Gecko*/
      display: inline;
      list-style: none;
      position: relative;
      height: auto;
    }
    
    ul#navmenu-h ul {
      margin: 0;
      border: 0 none;
      padding: 0;
      width: auto;
      list-style: none;
      display: none;
      position: absolute;
      top: 24px;
      left: 3px;
      width: 95px;
    }
    
    ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
      padding: 3px;
      clear: both;
      display: block;
      font: 1px/0px serif;
      height: 0;
      visibility: hidden;
    }
    
    ul#navmenu-h ul li {
      width: 160px;
      padding: 0;
      float: left; /*For IE 7 lack of compliance*/
      display: block !important;
      display: inline; /*For IE*/
    }
    
    /* Root Menu */
    ul#navmenu-h a {
      border: 0;
    /*  border-right-color: #000000;
      border-bottom-color: #000000;*/
      padding: 3px 5px;
      /*margin: 0 0 -.2em 0;*/
      float: none !important; /*For Opera*/
      float: left; /*For IE*/
      display: block;
      color: #FFF;
      font:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:11pt;
      text-decoration: none;
      height: auto !important;
      height: 1%; /*For IE*/
    }
    
    /* Root Menu Hover Persistence */
    ul#navmenu-h a:hover,
    ul#navmenu-h li:hover a,
    ul#navmenu-h li.iehover a {
    	background: #900;
    	color: #FFF;
    	font-size: 12pt;
    	line-height:normal;
    }
    
    .h1 {
    	font-weight:800;
    	font-size:20px;
    	color:#000;
    }
    
    .h2 {
    	font:"Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size:10pt;
    }
    
    .h3 {
    	color:#FFF;
    	text-align: center;
    	font-size: 12pt;
    }
    
    .h4 {
    	color:#FFF;
    	font-size:10pt;
    	text-align:center;
    }
    
    .h5 {
    	font-weight:900;
    	font-size:13pt;
    }
    
    .h6 {
    	text-align:left;
    }
    
    .clearit {
    	clear:both;
    }



    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Historic Tsunamis in Hawaii</title>
    <link href="layout.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
    <style>
    <!--
    a:link { color: #000; text-decoration: underline;}
    a:visited { color: #000; text-decoration: underline;}
    a:active { color: #000; text-decoration: underline;}
    a:hover { color: #000; text-decoration: underline;}
    -->
    </style>
    
    <link href="../layout.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="wrapper">
    
    <div id="topcol"><a href="http://www.pdc.org/iweb/pdchome.html;jsessionid=690F31090F795313C9CA7182BBE9E457" style="border:0px solid #CCC;"><img src="../plainpdclogo.jpg" alt="PDC" width="170" height="63" class="img" longdesc="http://www.pdc.org/" border="0px"/></a></div>
      
      <div id="tophorizrow">
      <p class="headerfooter"><span class="h2"><a href="#">Translate Site</a> | <a href="#">Contact Us</a> | <a href="#">Login</a> | <a href="#">EMOPS</a></span></p></div>
      <div id="topnav"> 
      <ul id="navmenu-h">
      <li><a class="current" "href="#">Tools</a></li>
      <li><a href="#">Solutions</a></li
      ><li><a href="#">Disaster</a></li
      ><li><a href="#">Weather & Hazard</a></li
      ><li><a href="#">Proiects</a></li
      ><li><a href="#">About PDC</a></li
      ></ul>
      </div>
    
    <div id="bottomcolredtop"><p class="h3">Disaster News</p></div>  
    <div id="leftcol"></div>
    <div id="bottomcolredtopb"><p class="h4">What can PDC do for you?</p></div>
    <div id="rightcol"><img src="pictures/sumatra_tsunami.jpg" width="400" height="200" alt="tsunami"/></div>
    <div id="middlecol"><p>THIS IS SUPPOSED TO BE IN THE WHITE PART</p></div>
     
        <div class="leftimage" id="content"> 
        <p><span class="h1">Historic Tsunamis in Hawaii</span></p>
          <p>&nbsp;</p>
        <p>In Hawaii, tsunamis have accounted for more lost lives than the total of all other local disasters. In the 20th century, an estimated 221 people have been killed by tsunamis. Most of these deaths occurred on the Big Island during the tsunamis of 1946 and 1960, two of the largest tsunamis to strike in the Pacific. Of the top ten strongest earthquakes since the 1900’s five have produced major tsunamis that have hit the Hawaiian Islands. </p>
        
        <p>Since 1992, tsunamis have claimed over 300,000 lives worldwide. While tsunamis are rare, they can strike year-round and during any time of the day or night. Because of the increased development of coastlines and a lack of knowledge about tsunamis, thousands of residents and tourists are at risk</p>
    <p>&nbsp;</p> 
    
    <p><object width='880' height='350' ><param name='movie' value='http://www.timetoast.com/flash/TimelineViewer.swf' /><param name='passedTimelines' value='62688' /><param name='allowScriptAccess' value='always' /><param name='bgColor' value='#d6d6d6' /><embed src='http://www.timetoast.com/flash/TimelineViewer.swf?passedTimelines=62688' type='application/x-shockwave-flash' passedTimelines='62688' width='880' height='350' bgColor='#d6d6d6' allowScriptAccess='always' /></object></p>
    <p>&nbsp;</p> 
    
    <p><span class="h5">1868:</span> On April 3rd 1968 a magnitude 7.9 earthquake struck off the coast of the Island of Hawaii.  Wave heights rose 12-15 meters destroying all houses and warehouses in the Kau-Puna area of the Big Island. 46 people were drowned by these waves.</p>
    <p>&nbsp;</p>
    
    <p class="main"><a href="pictures/l1946i.jpg" rel="lightbox[tsunami]" title="1946 Tsunami - Note the man on the left before the wave hit the Hilo pier."><img src="pictures/s1946i.jpg" alt="1946" width="279" height="227" class="leftimage" /></a> <span class="h5">1946:</span> On April fool’s day of 1946 a magnitude 7.4 undersea earthquake near the Aleutian chain of islands in Alaska generated a massive tsunami traveling to the Big Island at 500 miles per hour. A 32-foot wave destroyed a third of Hilo, killed 159 people, and caused over $26 million in damage throughout the islands. Two years later the Pacific Tsunami Warning Center was established in Hawaii.</p><div class="clearit"></div>
    
    <p ><a href="pictures/s1952iii.jpg"  rel="lightbox[tsunami]" title="1952 Tsunami - Aerial view of Kaika Bay on the North Shore of Oahu. The fourth wave is progressing towards the beach houses.)"><img src="pictures/s1952iii.jpg" alt="1952" width="300" height="311" class="rightimage" /></a><span class="h5">1952:</span> On November 4th 1952 a magnitude 9.0 earthquake generated a tsunami that reached Hawaii at 1:00pm. Luckily no lives were lost, although property damaged was estimated between $800,000 -$1,000,000. Many areas were hit hard by these waves causing “beached boats, houses to collide, destroyed piers, scoured beaches, moved road pavement, etc” (USGS).</p>
    <div class="clearit"></div>
    
    <p ><a href="pictures/s1957i.jpg"  rel="lightbox[tsunami]" title="1957 Tsunami - This series of photos shows the progression of the tsunami waves at Laie Point."><img src="pictures/s1957i.jpg" alt="1957" width="300" height="332" class="leftimage" /></a><span class="h5">1957:</span> The tsunami of March 9th 1957 was generated by a magnitude 8.3 earthquake in the Aleutian Islands.  Major flooding occurred on the Big Island, Kauai, and Midway Island. While no lives were lost, property damaged was estimated at $5 million.</p>
    <div class="clearit"></div>
    
    <p ><a href="pictures/l1960i.jpg" rel="lightbox[tsunami]" title="1960 Tsunami - The force of the waves bent parking meters to the ground in the Waiakea area of Hilo."><img src="pictures/s1960i.jpg" alt="1960" width="255" height="172" class="rightimage" /></a><span class="h5">1960:</span> On May 23rd 1960 a magnitude 8.5 earthquake in Chile generated a tsunami that killed 61 people in Hawai`i who ignored the warnings and went to the coast to view the waves. The tsunami hit only a minute after the Pacific Tsunami Warning Center predicted. The 35-foot waves were so strong that they wiped away many buildings in Hilo and bent parking meters to the ground. Property damage was estimated at $24 million.</p>
    <div class="clearit"></div>
    
    <p><a href="pictures/l1975ii.jpg" rel="lightbox[tsunami]" title="1975 Tsunami - In the Wailoa River of Hilo small boats were overturned."><img src="pictures/s1975ii.jpg" alt="1975" width="255" height="159" class="leftimage" /></a><span class="h5">1975:</span> The tsunami of November 29th 1975 was locally generated by two earthquakes on the south coast of the Big Island. At Halape Beach Park 32 campers were awoken from the quakes. Two campers were killed and 19 were injured after the wave carried them to the base of the cliff. Property damage was estimated at $4.1 million.</p><div class="clearit"></div>
    
    <p class="rightimage"><a href="Tsunami Sources.docx">Sources</a></p>
    
    </div>
    
    <div id="footer"></div>
    
    </div>
    
    </body>
    
    </html>
    Any help is appreciated! If there are any questions about what is what in my code, I would be more then willing to explain. Thanks!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    As a first step, validate your html using w3-validator and fix the errors. And I'd recommend you to check http://bonrouge.com/3c-hf-fixed.php, to see how to make a good 3 column layout.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    With your advice from the other post and using that website fixed this problem. Thanks again!

    I really like your quote by the way.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •