css template not working

**pngsigut** · 07-02-2008, 06:24 PM

i have this template i got off of this site but it does not work. When i view the web page the coloumns are shifted to the left so all you see is half of the right column and to left side of the screen.

Code:

<style type="text/css">

body{
 margin: 0;
 padding: 0;
 line-height: 1.5em;
}

b{font-size: 110%;}
em{color:red;}

#maincontainer{
 width: 940px; /*width of main container*/
 margin: 0 auto; /*Center container on page*/
}

#topsection{
 background: #EAEAEA;
 height: 90px /*Height of top section*/
}

#topsection h1{
 margin: 0;
 padding-top: 12px;
}

#contentwrapper{
 float: right;
 width: 100%;
}

#contentcolumn{
 margin: 0 190px 0 188px; /*margins for content column. should be "0 right columnwidth 0 leftcolumn width*/
}

#leftcolumn{
 float: left;
 width: 188px; /*width of left column in pixel*/
 margin-left: -940px; /*set margin to that of -(maincontainerwidth)*/
 background: #C8FC98;
}

#rightcolumn{
 float: left;
 width: 190px; /*width of right column in pixel*/
 margin-left: -190px; /*set margin to -(rightcolumnwidth)*/
 background: #336699;
}

#footer{
 clear: left;
 width: 100%;
 background: black;
 color: #FFF;
 text-align: center;
 padding: 4px 0;
}

#footer a{
 color: #FFFF80;
}

.innertube{
 margin: 20px; /*margins for inner div inside each column (to provide padding)*/
 margin-top: 0;
}

A.menulink{
 display: block;
 width: 170px;
 text-align: left;
 text-decoration: none;
 font-family: arial;
 font-size: 11px;
 color: #000000;
 border: none;
 border: solid 1px #ffffff;
}

A.menulink:hover {
 border: solid 1px #6100c1;
 background-color: #f0e1ff;
} 

</style>

can anyone help with this issue.

**techietim** · 07-02-2008, 06:32 PM

Please include your HTML as well.

**pngsigut** · 07-02-2008, 06:45 PM

sorry bout that

Code:

<html>
<head>
  <link href = "style.css" rel = "stylesheet" type = "text/css">
</head>
<title></title>
<body>
  <div id="maincontainer">
      <div id="topsection"><div class="innertube">
            <h1>PowerNet Global 
            </h1>

      </div> 
  </div>

  <div id="contentwrapper">
      <div id="contentcolumn">
         <div class="innertube">
              <center>main informaition.</center>
                kasdjfl;kjaslkd;jflkasjdf;lkjaklsdj;lkj;lsjdfkj
         </div>
      </div>


                                           <div id="leftcolumn">
                                                          <div class="innertube"><b>left column: <em>180px</em></b>
                                                                           <table border="0" width="180">
                                                                                        <tr>
                                                                                          <td width="100%" bgcolor="#E6E6E6"><b>links to site<b>
                                                                                        </tr>
                                                                                         </td>
                   <tr>
                     <td width="100%"><a href="services.html" class="menulink" class=&{ns4class};>Services</a>
                     </td>
                  </tr>
               </table>
                   ;kasjd;kfjalsjdf;lkjasdkljfla;ksjdflkjaslkjdglkhasfl;ghla;ksgl;asgljasjfgfkljasdf
         </div>
    </div>
   
                          <div id="rightcolumn">
                                     <div class="inndertube">
                                                       fill with local/world news with weather or other info 
 
                                                               <script src="http://gmodules.com/ig/ifr?url=http://blog.outer-court.com/homepage/miniweb.xml&amp;synd=open&amp;w=180&amp;h=140&amp;title=Mini+Web&amp;border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB%7C0px%2C1px+solid+%230088CC&amp;output=js">
                                                               </script>
                                     </div>
                           </div>

                     <div id= "footer">
                                 <a href="http://www.pngusa.net">Go back Home</a>
                     </div>
</div>



</body>
</html>

**techietim** · 07-02-2008, 06:59 PM

No offense, but you have really butchered that code up. Would you please link me to the original template you used and I'll try and work you through it.

**pngsigut** · 07-02-2008, 07:02 PM

http://www.dynamicdrive.com/style/la...d-fixed-fixed/ how did i butcher that did think i could.

**pngsigut** · 07-02-2008, 10:07 PM

is anyone able to help.

**rangana** · 07-03-2008, 12:37 AM

First, you missed to add a DTD in your page.

Secondly, I wonder why you have to float the element to the right, when your expected behavior is to the left:

Code:

#contentwrapper{
 float: right;
 width: 100%;
}

Change the highlighted to left.

Third, you were not closing your contentwrapper div:

Code:

 <div id="contentwrapper">
      <div id="contentcolumn">
         <div class="innertube">
              <center>main informaition.</center>
                kasdjfl;kjaslkd;jflkasjdf;lkjaklsdj;lkj;lsjdfkj
         </div>
      </div>
</div>

Add the highlighted.

Lastly, you have this typo:

Code:

div id="rightcolumn">
                                     <div class="inndertube">

And as a parting thought, you've got a number of deprecated tags (<center>) and attributes:

Hope it helps.

**pngsigut** · 07-03-2008, 04:05 PM

i thought the contentwrapper should enclose the entire page and other div tags... and i was using the tags just for testing. but thanks for the help so far.