HTML and CSS

Fluid Width Layout Problem

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Dec 2008

Posts: 2

Reputation: TagMaker is an unknown quantity at this point

Solved Threads: 0

TagMaker

Offline

Newbie Poster

Fluid Width Layout Problem

Dec 9th, 2008

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.

Last edited by TagMaker; Dec 9th, 2008 at 6:20 pm.

Attached Files

HomePage.txt (2.5 KB, 4 views)

•

Join Date: Nov 2007

Posts: 45

Reputation: colweb is an unknown quantity at this point

Solved Threads: 1

colweb

Offline

Light Poster

Re: Fluid Width Layout Problem

Dec 11th, 2008

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

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!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>
<!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>