Forum Moderators: not2easy
Let me make an example, you have 3 columns, left is links, centre is content, right is additional info. Everything in this post is hypothetical, I want oppinions.
Now, from what I understand, the approved way is to float left left, and float right right, so the HTML would be as follows:
<div id='container'>
...<div class='left'>Links</div>
...<div class='right'>Links</div>
...<div class='centre'>Links</div>
</div>
So the centre floats between the 2 side columns.
But consider this, I add a stylesheet for people with sight difficulties, tunnel vision, cateracts, things like that. I want a big font, and high contrast for this. This means that the links on the left, and the info on the right can't fit into their columns anymore, so I take the floats off to make them full width.
ok, no problem, but now my additional info, that I want them to see last, appears before the page content. So my HTML now needs to be:
<div id='container'>
...<div class='left'>Links</div>
...<div class='centre'>Links</div>
...<div class='right'>Links</div>
</div>
Which makes more sense anyway, but I have 100 pages (maybe more, maybe less) and I don't want to have to make 2 copies of them all!
Now the only thing I can think of, is to give centre a fixed with, and use margin 0 auto to centre it. Then make left and right position absolute with left and right 0 respectively.
How would you do it?
I'm not sure if you're considering this, but you can always have relative width sizing for the side bars, such as 22%, 56%, 22%.
That way, they just need to make their window bigger for stuff to fit. Now that's not really the best solution, though, considering that they probably won't be able to increase their window size enough, depending on how large the font you were making.
What I'm thinking is just size your divs using EMs. That way your content will always be the same proportion as it's container, and they will both increase in size freely.
Perhaps one option for stylesheet would be to use CSS system colors ( [utoronto.ca...] ), so that if they use a high contrast color template on their Windows OS, that it will be the same style on the webpage they are on.
[edited by: Xapti at 2:22 am (utc) on May 1, 2007]
Also, <center> is deprecated, and has been (so I'm told in another thread) for 8 years.
no-one says you have to float left left or float right right ;) with a bit of creativity on your floats and/or some negative margining you can move them around quite easily, and then if it is just columns you're interested in you can get even more creative with position: relative; and left positioning!
Just for fun, here's a sample code, using the simple negative margin method, no positioning involved, I had made up earlier - I have now added a wee script to enable the different layouts to toggle on click.
The HTML source is <main, left, right> and that never changes, in this sample and it would be better if the words left and right weren't used because as you see from the demo they're only in that order 3 from 12 times, but as the class names reflect the swaps I'll leave it to your imagination what you would name them!
If you then simply want to add some accessibility feature to allow for increased font size you could toggle the class name to provide the order/widths you want to best suit the increased font size?
this is a very simple 3 column mixture which provides a dozen or so different displays, there are likely more possible and with more blocks there would be even more variations.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Swap Order Floats</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--
function toggle(el) {
document.getElementById("swapthis").className = el;
}
//--><!]]></script>
<style type="text/css" media="screen">
html, body {margin:0; padding:0; font-size: 100%;}
body {font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center;}
h1 {font-size: 1.3em; margin: 0.5em 0;}
h2 {font-size: 1.1em; margin: 0.5em 0;}
p {font-size: 0.9em; margin: 1em 0;}
#wrapper {
text-align: left;
width: 900px;
margin: 0 auto;
padding: 0;
border: 1px solid #000;
overflow: auto;
clear: both; /* FF */
}
#header, #footer {
width: 900px;
padding: 1px 0;
margin: 0 auto;
background: #dad;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #000;
clear: both;
text-align: center;
}
#footer {
line-height: 40px;
font-size: 0.8em;
border-width: 0 1px 1px 1px;
}
/* list choices that toggle class name */
ul {
list-style:none;
margin: 0;
padding: 0;
}
li {
float:left;
display: inline; /* ie double margin */
margin: 10px 5px;
font-weight:bold;
}
li.title {
margin-left: 20px;
line-height: 34px;
}
li a {
float:left;
padding: 0 5px;
text-align:center;
height: 30px;
line-height: 30px;
background:#ffc;
color:#000;
font-size:14px;
text-decoration:none;
border:1px solid #036;
}
li a:hover { background:#ff0;}
.pad {border: 1px solid #ddd;padding: 0 10px;}
.main .pad {background: #eee;}
.right .pad {background: #ffc;}
.left .pad {background: #fff;}
.clear {height: 0; font-size: 0; line-height: 0; clear: both;}
.main, .left, .right {float: left; display: inline; width: 100%;}
/********* start the options ****************/
/* m-lr - main (top) - left, right (bottom) */
.m-lr .main {width: 100%;}
.m-lr .left {width: 50%;}
.m-lr .right {width: 50%;}
/* m-rl - main (top) - right, left (bottom) */
.m-rl .main {width: 100%;}
.m-rl .left {width: 50%; margin-left: 50%;}
.m-rl .right {width: 50%; margin-left: -100%;}
/* mlr - main, left, right */
.mlr .main {width: 60%;}
.mlr .left {width: 20%;}
.mlr .right {width: 20%;}
/* mrl - main, right, left */
.mrl .main {width: 60%;}
.mrl .left {width: 20%; margin-left: 20%;}
.mrl .right {width: 20%; margin-left: -40%;}
/* lrm - left, right, main */
.lrm .main {width: 60%; margin-left: 40%;}
.lrm .left {width: 20%; margin-left: -100%;}
.lrm .right {width: 20%; margin-left: -80%;}
/* lmr - left, main, right */
.lmr .main {width: 60%; margin-left: 20%;}
.lmr .left {width: 20%; margin-left: -80%;}
.lmr .right {width: 20%;}
/* rlm - right, left, main */
.rlm .main {width: 60%; margin-left: 40%;}
.rlm .left {width: 20%; margin-left: -80%;}
.rlm .right {width: 20%; margin-left: -100%;}
/* rml - right, main, left */
.rml .main {width: 60%; margin-left: 20%;}
.rml .left {width: 20%;}
.rml .right {width: 20%; margin-left: -100%;}
/* mlr-2 - main (left) - left, right (right) */
.mlr-2 .main {width: 50%;}
.mlr-2 .left {float: right; width: 50%;}
.mlr-2 .right {float: right; width: 50%;}
/* mrl-3 - main (right) - right, left (left) */
.mlr-3 .main {float: right; width: 50%;}
.mlr-3 .left {width: 50%;}
.mlr-3 .right {width: 50%;}
/* lm-r - left, main (top) - right (bottom) */
.lm-r .main {width: 50%; margin-left: 50%;}
.lm-r .left {width: 50%; margin-left: -100%;}
.lm-r .right {width: 100%;}
/* ml-r - main, left (top) - right (bottom) */
.ml-r .main {width: 50%;}
.ml-r .left {width: 50%;}
.ml-r .right {width: 100%;}
/* IE6 and below rounding corrections */
* html .main {margin: 0 -1px 0 0;}
* html .mlr-3 .main {margin: 0 0 0 -1px;}
</style>
</head>
<body id="swapthis">
<ul>
<li class="title">Order blocks:</li>
<li><a onclick="toggle('m-lr');return false;" href="#">m-lr</a></li>
<li><a onclick="toggle('m-rl');return false;" href="#">m-rl</a></li>
<li><a onclick="toggle('mlr');return false;" href="#">mlr</a></li>
<li><a onclick="toggle('mrl');return false;" href="#">mrl</a></li>
<li><a onclick="toggle('lrm');return false;" href="#">lrm</a></li>
<li><a onclick="toggle('lmr');return false;" href="#">lmr</a></li>
<li><a onclick="toggle('rlm');return false;" href="#">rlm</a></li>
<li><a onclick="toggle('rml');return false;" href="#">rml</a></li>
<li><a onclick="toggle('mlr-2');return false;" href="#">mlr-2</a></li>
<li><a onclick="toggle('mlr-3');return false;" href="#">mlr-3</a></li>
<li><a onclick="toggle('lm-r');return false;" href="#">lm-r</a></li>
<li><a onclick="toggle('ml-r');return false;" href="#">ml-r</a></li>
</ul>
<div id="header"><h1>Swap Floated Blocks - No Source change</h1></div>
<div id="wrapper">
<div class="main"><div class="pad">
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div></div>
<div class="left"><div class="pad">
<h2>Left Content</h2>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div></div>
<div class="right"><div class="pad">
<h2>Right Content</h2>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div></div>
<div class="clear"> </div>
</div>
<div id="footer">footer text</div>
</body>
</html>
One thing I don't understand though, you're setting them to display inline, yet the div inside stretches vertically to the content.
Remind me why this couldn't be done with the box centering exercise?
<div class="container">
...<div class='left'>Links</div>
Content
...<div class='right'>Links</div>
</div>
Gets you the results you wanted, no?
<div id='container'>
...<div class='left'>Links</div>
...<div class='right'>Links</div>
...<div class='centre'>Links</div>
</div>
One thing I don't understand though, you're setting them to display inline, yet the div inside stretches vertically to the content.
Suzy: isn't assigning width:100% for an inline element incorrect? or is the inline part just to fix up IE or something, and the rest render as block due to the float (since floated elements should display as block)?
And IE6 renders buggy as hell on ~85%+ of those CSS settings... I assume one would just use one/many of the multiple JS fixes for that?
[edited by: Xapti at 12:31 am (utc) on May 2, 2007]
isn't assigning width:100% for an inline element incorrect?
or is the inline part just to fix up IE or something, and the rest render as block due to the float (since floated elements should display as block)?
And IE6 renders buggy as hell on ~85%+ of those CSS settings... I assume one would just use one/many of the multiple JS fixes for that?
Simplest solution is to 'double wrap' the floats - make a second container and give that second wrapper the same dimension (900px in this case) as the outer one.. had forgotten about that bug, it only affects IE6 in compliant mode afaik.
Suzy
[edited by: SuzyUK at 7:14 am (utc) on May 2, 2007]
Dabrowski, I wasn't actually using the center tag... how you would then explain the left and right tags
LOL! Sorry Xapti, I should have used better classes in my example I guess!
Suzy, this works well -- but I imagine only in a wixed width layout, could this method be applied to a fluid layout?
For example, you're using the full width, and say for example, left column is 10ems, right is 8ems, as my designs typically use something like this.
I want to avoid using fixed widths/heights for content areas of the screen.
