I need to divide the screen into four equal sections and display content in each section. Would style sheets or tables be a better The browsers used would be IE 6.0 or IE 7.0. I need a solution that would work on both browsers.
views:
47answers:
4
A:
The controversial decision but easy fix is a 2x2 Table. Otherwise I would recommend using a CSS Framework such as http://www.blueprintcss.org/
This makes it easier to create CSS because it makes it feel like working in a grid and is IE6 and 7 compatible.
Other than that just create two rows of two divs in CSS and add appropriate IE fixes as needed.
See http://www.w3schools.com/css/ for CSS help.
Todd Moses
2010-03-03 04:58:11
+1
A:
Tables should be used for tabular data, not layout. I would do with floated div's and allow for growth rather than fixed height.
<div style="float: left; width: 50%;">1</div>
<div style="float: right; width: 50%;">2</div>
<br style="clear: both;" />
<div style="float: left; width: 50%;">3</div>
<div style="float: right; width: 50%;">4</div>
<br style="clear: both;" />
Dustin Laine
2010-03-03 05:00:07
That doesn't split the screen up into four equal sections height-wise, which I think is requested. If height doesn't matter, floating's fine.
D_N
2010-03-03 05:44:37
The solution should work across browsers. I don't see what's wrong with a single table to define this type of layout.
Khanzor
2010-03-03 05:52:02
His does work across browsers. (As does my own.)
D_N
2010-03-03 06:12:36
A:
Just whipped this together, I've never used it in production. But I tested it and it works in IE6 and IE7, as well as modern browsers like IE8 and Firefox.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
body { padding: 0 0 0; margin: 0 0 0;height:100%;width:100%; }
.square { position:absolute; border:1px solid #000000;width:49.75%;height:49.5%;_height:49.5%; overflow:auto; }
#top-left { top:0;left:0; }
#top-right { top:0; right:0; }
#bottom-left { bottom:0; left:0; }
#bottom-right { bottom:0; right:0; }
</style>
</head>
<body>
<div class="square" id="top-left"> ... </div>
<div class="square" id="top-right"> ... </div>
<div class="square" id="bottom-left"> ... </div>
<div class="square" id="bottom-right"> ... </div>
</body>
</html>
The only thing to keep in mind is that you should not put padding on those main structural divs. Put padding/margins on their contents. The height and width declaration on the body are there to help IE6.
D_N
2010-03-03 05:38:19
A:
"That doesn't split the screen up into four equal sections height-wise, which I think is requested. If height doesn't matter, floating's fine."
That is correct.
Thanks everyone for your feedback, it's greatly appreciated!
Duke
2010-03-03 06:08:50