let me start with a quote or two from your favourite, Patton:
“If everybody is thinking alike, then somebody isn’t thinking."
“Never tell people how to do things. Tell them what to do and they will surprise you with their ingenuity.”
now…
if floats were supposed to be columns they would be called columns so floats for columns are a hack.
there is a clear reason why floats are hacks: in a fluid layout, where dimensions are expressed in % for example, the box model dimensions calculated for elements are finally reduced to pixel dimensions, since web is primarily for display. the rounding appearing after approximations will never ensure a symmetry, hence the float for column, hence the hack when using float for a column: hiding the approximations under the rug and planting floats as the rug to hide it under. HACK.
those ids and classes have a clear purpose, but feel free to rant about them if you can’t/choose not to grasp the simple logic of those, i would not bother explaining them to you only so you can have another fired up argument when you start adding content, when you try to gather all the css in one file, it all makes sense. that is a template, not a good example of how to use ids and classes. the main elements are the only ones treated like that.
the header is not a heading
text-align is effective for elements that have display:inline-block (look at the different colours divs, aligned to the center) , even though they were blocks before. it works (and you’re probably using) on lis which are also block elements.
the whitespace inline-block implies it’s the problem i need more time to think about i tried whitespace stripping, in a following attempt, but it’s still lacking the float ability to stick to the right side. when resizing browser window, sometimes, a one pixel gap appears.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en">
<style type="text/css">
/*
* one can put a css reset here
* if indeed justifiable
* but not just by habbit
*/
/*
* .page needs a safe min-width:800px
* so it won't break % width for .contentsection,
* but it could be less, given some calculations
*/
div { text-align:center; }
.page { background:#ddd; }
#content { letter-spacing: -4px; word-spacing: -4px; }
#content * { letter-spacing: normal; word-spacing: normal; }
.contentsection { display:inline-block; vertical-align:top; }
/*
* the following two ie fix/hacks could be
* place in a different css file, w/o the hacks,
* and then make use of CC for IE
*/
*html .contentsection { display:inline; }
*+html .contentsection { display:inline; }
#header { background:#dfe; }
#nav1, #nav2 { width:25%; background:#fed; }
#nav1 { text-align:right; }
#nav2 { text-align:left; }
#main { width:50%; background:#def; }
#footer { background:#fde; }
</style>
</head><body id="inlinetest" class="page">
<div id="header" class="pagesection">
<span>header</span>
</div>
<div id="content" class="pagesection">
<div id="nav1" class="contentsection">
<span>a nav here</span><br>
<span>another line</span><br>
</div>
<div id="main" class="contentsection">
<span>main content here<span>
</div>
<div id="nav2" class="contentsection">
<span>another nav here</span>
</div>
</div>
<div id="footer" class="pagesection">
<span>footer</span>
</div>
</body></html>
aside from obvious ie problems, it’s an improvement: 50+25+25, no 49 or 24. this one got me thinking about a combination between the two: inline blocks and floats. maybe, i will try different scenarios.
the inline-blocks layout breaking under a certain width or certain conditions is also common to the floats layout.
not all paged have to be 100% height, some just extend how they fit…
css works the way everybody likes, it’s not “your way or the highway”, you know.
your latest example is using floats and i don’t want that. as i’ve said you provided a perfect example on how to do it with floats. Paul O’B did too. over and over again. i’m trying another way, inline-blocks, that, if had a proper justify alignment on line, would’ve made floats a lot less known. since floats were the table terminators, browsers evolved too. if by me trying to go w/o floats means your last paragraph, so be it
and i’ll be waiting your comments on the next post i’ll make on my attempt to see if inline-block can be use sometimes. all criticism is good for me
you are a knowledgeable man, no doubt, but you need to learn to let others creative attempts be also. otherwise i’m afraid the floats for column idea would’ve been inexistent.
that said, i’m not the only one attempting such a thing. maybe something will come out, who knows.
No markup was, is, or will be harmed during this trials. Only my brain