SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Belgium
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is this a good layout code to work with ?

    Hey
    i currently use this code for a 3 column layout:
    HTML 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>
    <style type="text/css">
    body, html {
    	margin: 0px;
    	padding: 0px;
    }
    #container {
    	width: 780px;
    	margin: 0px;
    	margin-left: auto;
    	margin-right: auto;
    	padding: 0px;
    }
    #header {
    	padding: 0px;
    	margin-bottom: 0px;
    	background-color: #0000FF;
    }
    #inhoud {
    	margin-right: 200px;
    	margin-left: 200px;
    	padding: 0px;
    	background-color: #999999;
    }
    #leftcolumn {
    	float: left;
    	width: 200px;
    	margin: 0;
    	margin-right: 0px;
    	padding: 0px;
    	background-color: #00FF66;
    }
    #rightcolumn {
    	float: right;
    	width: 200px;
    	margin: 0;
    	margin-left: 0px;
    	padding: 0px;
    	background-color: #993300;
    }
    #footer {
    	clear: both;
    	padding: 0px;
    	margin-top: 0px;
    	background-color: #FF00FF;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="header">Layout header</div>
    <div id="leftcolumn">Left Column</div>
    <div id="rightcolumn">Right Column</div>
    <div id="inhoud">Content</div>
    <div id="footer">Footer</div>
    </div>
    </body>
    </html>
    And was wondering, is this good to work with, or will i have any problems in some browsers, or will i have problems with anything ?
    It seems to work as far as i know
    thanks

  2. #2
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only real way to find out is to test, test, test and test again.

    Try it on every browser you can get your hands on, on Windows, Mac and Linux, and at a variety of monitors, screen resolutions and text-sizes. If you don't have access to alternative platforms, ask friends to test it for you, ask here, or check out services like SiteVista or BrowserCam.

    Fill it full of content of all shapes, sizes and types. Float images left and right in your content box.

    Your first potential problem is that you're relying on default margin and padding values. They aren't always identical from one browser to the next, so you're better off setting them explicitly, e.g. margin: 0 0 0 0; (top right bottom left).
    Olly Hodgson
    thinkdrastic.net

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I generally prefer to have the main column come before the outside ones in the source so I'd use a source ordered method but it'll depend on your content to some extent.

  4. #4
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Belgium
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    Your basic model is a wrapper model a single column width 2 floats in it, that is forced to perform as a 3 column ?
    In IE it’s suffers from the 3 pixel jog
    In the content box you can’t clear floats , they drop below the left right column

    My second model is full floating , the content container is always 100% wide, and the model fits in any width

    The third is basically your model only in IE the inhoud container is floating whiteout margins and takes the width of the 100% wide floating content container y

    And the last one fixed width floating columns

    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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    	*{padding:0;margin:0;}
    
    	#container,.container{margin: 0 auto;}
    	.w{width:800px;}
    	head+body .oh{overflow:hidden;}
    	
    	#header,.header{background:#0000FF;}
    
    	#inhoud,#inhoudx{
    	margin:0 200px 0 200px;
    	background: #999999;
    	}
    	/* haslayout 3 pixel jog*/
    	* html #inhoud{height:1%;}
    	
    	/*  */
    	.inhoud{margin: 0 400px 0 0px;background:#ccccff;}
    	
    	#leftcolumn,.leftcolumn{
    	float:left;
    	width:200px;
    	background: #00FF66;
    	}
    	
    	#rightcolumn,.rightcolumn{
    	float:right;
    	width:200px;
    	background:#993300;
    	}
    	
    	#footer,.footer{
    	clear:both;
    	background:#FF00FF;
    	}
    	
    	/* always 100% width */
    	.x{width:100%;background:#999999;float:left;margin-right:-400px;}
    	
    	/* real column */
    	.y{width:100%;float:left;background:#ccccff;}
    	
    	.container #inhoudy{margin:0;float:left;width:400px;background: #999999;}
    	
    
    	
    </style>
    </head>
    <body>
    <p><br />your wrapper model </p>
    <div id="container" class="w">
    <div id="header">Layout header</div>
    <div id="leftcolumn">Left Column</div>
    <div id="rightcolumn">Right Column</div>
    <div id="inhoud">Content</div>
    <div id="footer">Footer</div>
    </div>
    <p><br />full float any width</p>
    <div class="container oh">
    <div class="header">Layout header</div>
    <div class="leftcolumn">Left Column</div>
    <div class="x">
    <div class="inhoud">Content</div>
    </div>
    <div class="rightcolumn">Right Column</div>
    <div class="footer">Footer</div>
    </div>
    <p><br />width margin box also any width</p>
    <div class="container w">
    <div class="header">Layout header</div>
    <div class="leftcolumn">Left Column</div>
    <div class="rightcolumn">Right Column</div>
    <div id="inhoudx" class="fl">
    <div class="y">Content</div>
    </div>
    <div class="footer">Footer</div>
    </div>
    <p><br />3 floating columns, fixed width</p>
    <div class="container w">
    <div class="header">Layout header</div>
    <div class="leftcolumn">Left Column</div>
    <div class="rightcolumn">Right Column</div>
    <div id="inhoudy" class="fl">Content</div>
    <div class="footer">Footer</div>
    </div>
    
    </body>
    </html>
    wich one do you recommend me to use in my case then ? the 3rd one ?
    thanks


Bookmarks

Posting Permissions

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