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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    306
    Thanks
    24
    Thanked 0 Times in 0 Posts

    Cool css with fluid and fixed layout

    Hi;

    I am trying to make my header&content&footer as fluid, the rest of are fixed, but my code does not work, the header&content&footer are not fluid, could anyone help. Thanks.

    Code:
    main.css
    
    
    * { padding: 0; margin: 0; }
    
    body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
    }
    #wrapper { 
     margin: 0 auto;
     width: 922px;
    }
    #header {
     color: #333;
     width:97%;
     float: left;
     padding: 10px;
     border: 1px solid #ccc;
     height: 100px;
     margin: 10px 0px 5px 0px;
     background: #E7DBD5;
    }
    
    #leftcolumn { 
     color: #333;
     border: 1px solid #ccc;
     background: #E7DBD5;
     margin: 0px 5px 5px 0px;
     padding: 10px;
     height: 350px;
     width: 195px;
     float: left;
    }
    #content { 
     float: left;
     color: #333;
     border: 1px solid #ccc;
     background: #F2F2E6;
     margin: 0px 5px 5px 0px;
     padding: 10px;
     height: 350px;
     width: 49%;
    
    }
    #rightcolumn { 
     color: #333;
     border: 1px solid #ccc;
     background: #E7DBD5;
     margin: 0px 0px 5px 0px;
     padding: 10px;
     height: 350px;
     width: 195px;
     float: left;
    }
    #footer { 
     width: 97%;
     clear: both;
     color: #333;
     border: 1px solid #ccc;
     background: #BD9C8C;
     margin: 0px 0px 10px 0px;
     padding: 10px;
    }

    html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Fixed Width CSS Layouts - 3 Column - fw-37-3-col</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    
    <body>
    
       <!-- Begin Wrapper -->
       <div id="wrapper">
       
             <!-- Begin Header -->
             <div id="header">
    		 
    		       This is the Header		 
    			   
    		 </div>
    		 <!-- End Header -->
    		 
    		 
    		 <!-- Begin Left Column -->
    		 <div id="leftcolumn">
    		 
    		       Left Column
    		 
    		 </div>
    		 <!-- End Left Column -->
    		 
    		 <!-- Begin Content Column -->
    		 <div id="content">
    		       
    	          Content 	 
    		 
    		 </div>
    		 <!-- End Content Column -->
    		 
    		 <!-- Begin Right Column -->
    		 <div id="rightcolumn">
    		 
    		       Right Column
    		 
    		 </div>
    		 <!-- End Right Column -->
    		 
    		 <!-- Begin Footer -->
    		 <div id="footer">
    		       
    			   This is the Footer		
    			    
    	     </div>
    		 <!-- End Footer -->
    		 
       </div>
       <!-- End Wrapper -->
       
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by kamkam View Post
    Hi;

    I am trying to make my header&content&footer as fluid, the rest of are fixed, but my code does not work, the header&content&footer are not fluid, could anyone help. Thanks.

    Dont define width of wrapper, if you want to make it fluid...

  • #3
    Regular Coder
    Join Date
    Dec 2006
    Posts
    306
    Thanks
    24
    Thanked 0 Times in 0 Posts
    I changed it, but it does not chnage anything.



    Code:
    * { padding: 0; margin: 0; }
    
    body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
    }
    
    #header {
     color: #333;
     width:97%;
     float: left;
     padding: 10px;
     border: 1px solid #ccc;
     height: 100px;
     margin: 10px 0px 5px 0px;
     background: #E7DBD5;
    }
    
    #leftcolumn { 
     color: #333;
     border: 1px solid #ccc;
     background: #E7DBD5;
     margin: 0px 5px 5px 0px;
     padding: 10px;
     height: 350px;
     width: 195px;
     float: left;
    }
    #content { 
     float: left;
     color: #333;
     border: 1px solid #ccc;
     background: #F2F2E6;
     margin: 0px 5px 5px 0px;
     padding: 10px;
     height: 350px;
     width: 65%;
    
    }
    #rightcolumn { 
     color: #333;
     border: 1px solid #ccc;
     background: #E7DBD5;
     margin: 0px 0px 5px 0px;
     padding: 10px;
     height: 350px;
     width: 195px;
     float: left;
    }
    #footer { 
     width: 97%;
     clear: both;
     color: #333;
     border: 1px solid #ccc;
     background: #BD9C8C;
     margin: 0px 0px 10px 0px;
     padding: 10px;
    }

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    share mockup of desired layout...

  • #5
    Regular Coder
    Join Date
    Dec 2006
    Posts
    306
    Thanks
    24
    Thanked 0 Times in 0 Posts
    Sorry, i can not get what you mean ?

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    create a image of layout you want and share


  •  

    Posting Permissions

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