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):
Printable View
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):
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:
Valid, but (although better as regards the footer) still a bit inconsistent across browsers/different sized windows as regards the footer location.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 liuhgl hhgl hug iiof uuif oihg hjigf hufkhg uis g
uhuf uug uhyufg ui f uhuf uhf ufoug</div>
<div id="col2">col 2uf uhfg uhif hofu
uf p9f8 ohg ug pfgipo g iuf yfof ufy hf7uyf fuuf98 bghuig b hy gypjg g
pfugp uf p uh78fg ypoi u8f p iufh fou gu7yfghg8p 8ofuu byuifugggghh
hjh hhkk<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </div>
</div>
<div id="wrapper2">
<div id="col3">col 3ujpf u uhif hofu uf p9f8 ohg ug pfgipo g iuf yfof 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 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>