Member Avatar for TagMaker

Hello All,
I am having some problems with creating a 1 column fluid width web page which has a header section and left and right side bars. I can not get it to center nor to display consistently on different browsers. In fact its a complete mess. Please take a look at my attached CSS and HTML file and help point out to me my mistakes. Thank you in advance for your help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
 <head>
   <title> My Trials
   </title>
      <style type="text/css">
       body       {    margin: 0px 0px 0px 0px;
		       padding: 0px;	   	
                                                        
                  }

#Header    {
            
            height:160px;         
            background:#DF7401; 
                      
           }

        div img { 
                  display:block;
                  margin-left: auto;
                  margin-right: auto;              
                }

#Container {
             
                      
            background:white;            
        
            margin: 0 auto;
            
           }

#LeftCol  {float:left;width:5%; background:black;height:600px;}
#RightCol {float:right;width:5%; background:black;height:600px;}

#Main     {float:left;width:90%; height:600px}

#Footer   {clear:both; height:40px;background:black;}
#Nav       { position:relative;           
             left:20%;
	     top:15px;
	     width:160%;
     	     padding:0;
             margin:0           
           }  
          
#Nav  li {
          list-style-type: none;
           display:inline;           
          }
          
#Nav a, #Nav a:visited {          
          border-top:solid white 1px;
          border-bottom:solid white 1px; 
          color:White;
          font-family:arial, verdana, sans-serif; /* ADDED */
          font-size:50%; /* ADDED */
          text-align:center; /* ADDED */
          text-decoration:none; /* ADDED */
          padding:1% ;
          background:gray;
          }   
          
#Nav a:hover {  
                background:black;
                color:white;
               }   
      </style>
 </head>
   <body>
     <div id="Container"  >      
      

      <div id="LeftCol">
      </div>
        <div id="Header">
              <img src="MyImageFile.jpg">
        
       
      <div id="Nav">
       <UL >
        <LI><A href="index.html">Home</A>          
        <LI><A href="Stuff.html">Stuff</A> 
        <LI><A href="MoreStuff.html">More Stuffs</A>
        <LI><A href="About.html">About Us</A> 
        <LI><A href="Contact.html">Contact Us</A>
       </UL>
      </div>
      </div>      

      <div id="Main"> </div>
      
      <div id="RightCol">
      </div>
      
      <div id="Footer">
    
      </div>
      

     </div>
   </body>
</html>
  • 2 Contributors
  • 2 Replies
  • 80 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by TagMaker
Member Avatar for colweb

I'm not sure what you want to create, but maybe this will help:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
   <title>My Trials</title>
   <style type="text/css">

      * {margin:0; padding:0;}
      #Header {height:160px; width:100%; background:#df7401;}
      #Container {width:100%; background:#ffffff;}
      #LeftCol, #RightCol {width:5%; background:#000000; height:600px;}
      #LeftCol {float:left;}
      #RightCol {float:right;}
      #Main {height:600px;}
      #Footer {clear:both; height:40px; background:#000000; width:100%;}
      #Nav {padding-top:15px; margin-left:20%;}
      #MiddleCol {float:left; width:90%;}

      #Nav li {list-style-type: none; display:inline;}
      #Nav a, #Nav a:visited {border-top:solid white 1px; border-bottom:solid white 1px; 
                              color:White; font-family:arial, verdana, sans-serif; 
                              font-size:50%; text-align:center; text-decoration:none;
                              padding:1% ; background:gray;}
      #Nav a:hover {background:black; color:white;} 

   </style>
</head>

<body>
   <div id="Container">

      <div id="LeftCol">

      </div> <!-- end LeftCol -->

      <div id="RightCol">
      </div> <!-- end RightCol -->

      <div id="MiddleCol">

         <div id="Header">
            <img src="MyImageFile.jpg" alt=""/>

            <div id="Nav">
               <ul>
                  <li><a href="index.html">Home</a></li>
                  <li><a href="Stuff.html">Stuff</a></li>
                  <li><a href="MoreStuff.html">More Stuffs</a></li>
                  <li><a href="About.html">About Us</a></li>
                  <li><a href="Contact.html">Contact Us</a></li>

               </ul>
            </div> <!-- end Nav -->
         </div> <!-- end Header -->

      </div> <!-- end MiddleCol -->

      <div id="Footer">
      </div> <!-- end Footer -->

   </div> <!-- end Container -->
</body>
</html>

At least it looks the same in Firefox 3 and IE 6 under WinXP.

Member Avatar for TagMaker

Thank you so much, that is very close to what I wanted. I will definitely check to see what you did to make it work.

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.