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 4 of 4

Thread: CSS Layout

  1. #1
    New Coder
    Join Date
    Feb 2009
    Location
    Norway, Europe
    Posts
    94
    Thanks
    12
    Thanked 2 Times in 2 Posts

    CSS Layout

    I was trying to make a "header + 3 column + footer" page, but I've got some problems with the columns...

    I've used only percentages. Where did I go wrong? This page looks good some times, but other times, when you minimize your browser, the last column goes down underneath the body one. How come? Here's the code:

    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>My Site</title>
    
    	<style type="text/css">
    		* {
    			border: none;
    			padding: 0;
    			margin: 0;
    		}
    		
    		body {
    			background: black;
    			font-size: 62.5%;
    		}
    		
    		#entpage {
    			margin: 2em 3% 1.5em;
    			background: transparent;
    		}
    		
    		#adheader {
    			padding: 2% 2.5% 2% 2.5%;
    			width: inherit;
    			background-color: #CC0000;
    		}
    		
    		body div, p div, div div, p li, div p {
    			font-size: 1em;
    		}
    		
    		#mainpage {
    			margin: 1.3em 0;
    			overflow: auto;
    			background: transparent;
    		}
    		
    		#leftcol {
    			width: 12.5%;
    			float: left;
    			padding: 2.5% 2% 2% 3%;
    			background-color: #CC0000;
    		}
    		
    		#maincol {
    			width: 55.5%;
    			float: left;
    			margin: 0 2.5%;
    			padding: 2.5% 2% 2% 3%;
    			background-color: #CC0000;
    		}
    		
    		#rightcol {
    			width: 12.5%;
    			float: left;
    			padding: 2% 2% 2% 3%;
    			background-color: #CC0000;
    		}
    	</style>
    </head>
    
    <body>
      <div id="entpage">
    	<div id="adheader">
        	ads go here
        </div>
    	<div id="mainpage">
    		<div id="leftcol">
        		<ul>
            		<li>Stuff</li>
                	<li>Other</li>
                	<li>Stuff</li>
                	<li>Others</li>
                	<li>MEH.. -_-</li>
          	  </ul>
      		</div>
        
    		<div id="maincol">
    			stufff.....
    		</div>
    	
    		<div id="rightcol">
        		stuff...
    		</div>
      </div>
    </div>
    </body>
    </html>
    PS: You might say: "This page looks perfect", but that's only in some browser sizes.
    Always Use a DOCTYPE!
    Always Use * {margin: 0; border: none; padding: 0;} in the top of your CSS stylesheet.
    Always Use only CSS for layout; never (X)HTML.
    Always Have fun while coding!

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    At what resolution does the last column go under the body?

    At 1024 x 768?
    at 800 x 600?

    In a lot of situations there is a point where floated objects push each other off even in % equations.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Mar 2009
    Location
    Texas
    Posts
    13
    Thanks
    3
    Thanked 1 Time in 1 Post
    I would consider using a wild card on one of your percentages.

    For example, use 12.5%, auto , 12.5% or 12.5%, 55.5%, auto


  •  

    Posting Permissions

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