Results 1 to 2 of 2

Thread: Simple 4 column tableless div and more

  1. #1
    Join Date
    Jan 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Simple 4 column tableless div and more

    1) CODE TITLE: 4 column div and more

    2) AUTHOR NAME/NOTES:beamzintl

    3) DESCRIPTION: Using this simple method, you can achieve as many tableless columns as you desire.

    4) URL TO CODE:

    or, ATTACHED BELOW (see #3 in guidelines below):

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,475
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Invalid (doesn't pass HTML validation), and it looks fairly different in different browsers. The columns part seems to work, but the footer is in all different sorts of places depending upon window width and browser used to view the code.

    This would be better:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>header</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    /*coded by www.beamzintl.com*/
    html,body{margin:0;padding:0}
    body{font: 76% arial,sans-serif}
    p{margin:0 10px 10px}
    a{display:block;color: #981793;padding:10px}
    
    div#header{height:120px;line-height:80px;margin:0; padding-left:10px;background:#EEE;color:#79B30B}
    div#wrapper1{width: 50%; float:left}
    div#wrapper2{width: 49.9%; float:right}
    div#col1{background:#0066FF; width:50%; float:left}
    div#col2{background:#33FF66; width:49.9%;float:right;}
    div#col3{background:#CC3399; width:50%; float:left}
    div#col4{background:#FF0066; width:49.9%;float:right}
    div#footer{clear:both;height:40px;line-height:40px;margin-top:200px; padding-left:10px;background:#EEE;color: #79B30B}
    
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    <div id="header">header</div>
    <div id="content">
    <div id="wrapper1">
    <div id="col1">col 1hgjgk hvhjv hhjvkj jkbj jjbjk huhig uihuiojb uhui hg uihuikg 
    	uhiog hihuig huikg&nbsp; liuhgl hhgl hug iiof uuif oihg hjigf hufkhg uis g 
    	uhuf uug uhyufg ui f&nbsp; uhuf uhf ufoug</div> 
    <div id="col2">col 2uf&nbsp; uhfg uhif hofu 
    	uf p9f8 ohg ug pfgipo g iuf yfof&nbsp; ufy hf7uyf fuuf98 bghuig b hy gypjg g 
    	pfugp uf p uh78fg ypoi u8f p iufh fou gu7yfghg8p 8ofuu&nbsp; byuifugggghh 
    	hjh hhkk<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</div>
    </div>
    <div id="wrapper2">
    <div id="col3">col 3ujpf u uhif hofu uf p9f8 ohg ug pfgipo g iuf yfof&nbsp; ufy 
    	hf7uyf fuuf98 bghuig b hy gypjg g pfugp uf p uh78fg ypoi u8f p iufh fou 
    	gu7yfghg</div>
    <div id="col4">col 4 uhif hofu uf p9f8 ohg ug pfgipo g iuf yfof&nbsp; ufy hf7uyf 
    	fuuf98 bghuig b hy gypjg g pfugp uf p uh78fg ypoi u8f p iufh fou gu7yfghgl</div>
    </div>
    <div id="footer">footer</div>
    
    </div>
    </div>
    </body></html>
    Valid, but (although better as regards the footer) still a bit inconsistent across browsers/different sized windows as regards the footer location.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •