Crafting a started layout for 2 column website

HTML & CSS
1

I’m experimenting with different ways while trying to find the best, simplest, yet buletproof way that can be backward-compatible down to IE6.

My HTML5 Code is:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>2 Column Layout - Percentage based</title>
	<link rel="stylesheet" href="css/main.css">
</head>

<body>
	<header id="header-wrap">
		<div id="header">
			
		</div><!-- end #header -->
	</header><!-- end #header-wrap -->
	
	
	<div id="main" class="clearfix">
		<div id="col-main-wrap">
			<div id="col-main">
				
			</div><!-- end #col-main -->
		</div><!-- end #col-main-wrap -->
		
		<div id="col-side-wrap">
			<div id="col-side">
				
			</div><!-- end #col-side -->
		</div><!-- end #col-side-wrap -->
		
	</div><!-- end #main -->
	
	
	<footer id="footer-wrap">
		<div id="footer">
			
		</div><!-- end #footer -->
	</footer><!-- end #footer-wrap -->
</body>
</html>

And my CSS is as simple as this:

body {
	width: 100%;
	min-width: 960px;
	max-width: 1200px;
	margin: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
	color: #333;
}

#header-wrap {
	width: 100%;
	background-color: #ABC;
}

#header {
	padding: 20px;
}

#main {
	width: 100%;
}

#col-main-wrap {
	float: left;
	width: 75%;
	background-color: #EEE;
}

#col-side-wrap {
	float: right;
	width: 25%;
	background-color: #DDD;
}

#col-main, #col-side {
	padding: 20px;
}

#footer-wrap {
	clear: both;
	width: 100%;
	background-color: #ABC;
}

#footer {
	padding: 20px;
}

It works well on all Major browsers, except on IE versions below 8, while in IE9 it works good also. I wonder what am I missing in my CSS code to fix the header and footer area, so that the background is shown?

2

Step 1, lose the HTML 5 nonsense, this isn’t 2020… NOT that there is any legitimate reason to use that fat bloated steaming pile of a specification. This is even MORE true if you care about IE8 and lower, since they’ don’t know what HTML 5 elements ARE; NOR is throwing some stupid javascript shiv at it the answer (though guaranteed some nimrod will propose that sooner or later).

Step 2, lose clearfix, this isn’t 2001. Unnecessary element.

Step 3, where/what is your content?!? Until you have content or a reasonable facsimile of it you really shouldn’t be laying down DIV or structural elements, much less trying to apply styling to the markup.

Step 4, ease up on the DIV. If you need that many wrappers, there’s something wrong with what you’re trying to do or how you’re trying to do it.

Step 5, ease up on the comments, and place them BEFORE the element being closed so you don’t trip some unusual rendering bugs in certain versions of FF and IE. (there’s also little reason to say “end” on those… really? </div> is the end of something? whoddathunkit?)

Pretty much if you’re trying to build a simple two column layout compatible back to IE6, what are you doing with that HTML5 nonsense, endless pointless div, etc, etc… Double wrapping it in DIV also pretty well defeats the purpose… Do yourself a HUGE favor and go back to the actual RECOMMENDATION versions of the specification – XHTML 1.0 and HTML 4.01, preferably in STRICT.

You might also benefit by putting the REQUIRED type attribute on your CSS link, using MEDIA attributes, and using a somewhat less vague name on the CSS file :smiley:

– edit –

Also, applying WIDTH to BODY is NOT reliable cross browser… given all those DIV you have I’m surprised you don’t have a wrapper for doing that… and a margin reset is also in order here…

3

Just to give you an example of what I mean, this:


<!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"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<!--

	Don't forget to implement these later!

<link
	type="text/css"
	rel="stylesheet"
	href="print.css"
	media="print"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="handheld.css"
	media="handheld"
/>

-->

<title>
	2 Column Layout - Percentage based
</title>

</head><body>

<div id="pageWrapper">

	<h1>Site Name</h1>
	
	<ul id="mainMenu">
		<li><a href="#">Home</a></li>
		<li><a href="#">Forums</a></li>
		<li><a href="#">Links</a></li>
		<li><a href="#">FAQ</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	
	<div id="columnWrapper">
		<div class="fauxColumn"></div>
	
		<div id="content">
			<h2>Test section heading</h2>
			<p>
				Content area test text
			</p>
		<!-- #content --></div>
		
		<div id="sideBar">
			<p>
				SideBar test Content
			</p>
		<!-- #sideBar --></div>
		
	<!-- #columnWrapper --></div>
	
	<div id="footer">
		Test Footer Content
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div>
	
</body></html>

with this SCREEN.CSS


/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

body {
	text-align:center; /* center #pageWrapper IE 5.x */
	font:normal 90%/140% arial,helvetica,sans-serif;
	color:#333;
}

#pageWrapper {
	min-width:752px;
	max-width:1104px;
	width:95%;
	margin:0 auto;
	text-align:left;
}

* html #pageWrapper {
	/*
		IE knows not the min-width, but we can fake it with an expression.
		First, scripting off gets a crappy fixed width (oh well), then
		the expression.
	*/
	width:752px;
	width:expression(
		(document.body.clientWidth>1152) ? "1104px"
			: ((document.body.clientWidth>800) ? "auto" : "752px")
	);
}

h1 {
	padding:20px;
	background:#ABC;
}

#mainMenu {
	list-style:none;
	background:#CDE;
}

#mainMenu li {
	display:inline;
}

#mainMenu li a {
	display:inline-block;
	padding:4px 8px;
}

#columnWrapper {
	position:relative;
	overflow:hidden; /* wrap floats */
	width:100%; /* trip haslayout, wrap floats IE */
	background:#DDD;
}

.fauxColumn {
	position:absolute;
	bottom:0;
	left:0;
	width:75%;
	height:999em;
	background:#EEE;
}

#content,
#sideBar {
	position:relative;
	padding-top:1em;
}

#content {
	float:left;
	width:75%;
}

h2 {
	padding:0 20px 0.25em;
}

p {
	padding:0 20px 1em;
}

#sideBar {
	overflow:hidden; /* prevent line indent after float */
	height:1%; /* holly hack, trip haslayout, prevent float indent IE */
}

#footer {
	padding:20px;
	background:#ABC;
}

Is probably how I’d go about doing that… well, not true… I’d use a fixed side column width as variable width and narrow columns cause more problems than they solve (though I’d CONSIDER using EM there) which would open the door to using a faux-column images on #columnWrapper instead of the sandbag div.fauxcolumn I’m using. Works flawlessly all the way back to IE 5.5!

The real laugh being that’s the base HTML almost every website I’ve written the past six years is based on.

My advice to ANYONE interested in HTML5, particularly if you care about people actually USING your sites, is don’t even bother with that fat bloated wasteful idiocy. It only seems to exist to sell more books, prey on the ignorance of nubes and satiate the desires of the people who have the overwhelming need for “ooh, shiney and new!”… It certainly has NOTHING to do with making sites better, improving coding standards or rational decision making on the part of developers.

To be frank, ANYONE out there promoting it’s use should be ASHAMED OF THEMSELVES!

Sorry, didn’t mean to borderline threadjack – but it needs to be said… repeatedly, over and over again until people GET IT.

4

Ah ds, you’ll never change :slight_smile:

The reason the styling isn’t happening in IE 6-8 is because the new html5 elements need to be added with a js script before styles will be applied to them.


<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

I don’t personally use the HTML5 elements yet like section, header, footer because of that reason.
Still, the js script will work well enough for all the major user groups.

The wrappers div’s are the only thing that’s unnecessary in your layout so far.
clearfix is still widely used a helpful style, stick with it, looks fine.

If you’re just looking for a solid base for HTML5 you might just want to go with http://html5boilerplate.com/

5

and I quote:

Then this… even more laughable.

Wow, why don’t you just tell him to use Frontpage at that point…

Or were you intentionally bear-baiting?

6
Off Topic:

Or were you intentionally bear-baiting?

Just being relevant and not a militant arrogant expert at the same time.

It’s a brave world out there Jason, the times they are a changin’
HTML5 can be used, html5 boilerplate has heaps of good stuff in it, people should start using this stuff and learning about it yesterday.

Most of HTML5 was designed to be backwards-compatible so there’s no harm adding what falls into that basket.

7

If you don’t mind flushing your website down the toilet.

… and methinks we have a different definition of “good” – as much like every other html/css framework out there it’s some of the biggest idiocy I’ve seen this side of “OOCSS” or still making pages in Frontpage.

Unless it’s your own head after falling for the snake oil. Hell, I can’t believe anyone who actually knows ANYTHING about building a website can actually see ANY benefit from the markup parts of HTML 5… unless again it’s the people who still vomit up HTML 3.2 and until recently slapped a 4 tranny doctype on it. Go progress…

Newer isn’t always [url=http://battletech.hopto.org/images/modelM_cleaned.jpg]better.
Newer isn’t always [url=http://www.seriouswheels.com/pics-1930-1939/1938-VW-Beetle-Cabriolet-1280x960.jpg]Better

Say it with me people!

Newer isn’t always [url=http://2.bp.blogspot.com/-1Ep04IHdgZQ/TjXB9JIW5zI/AAAAAAAAFPY/DEI5xQxNiGM/s1600/john%2Bbelushi%2Bthe%2Bblues%2Bbrothers%2B3.jpg]Better!!!

8

Then why, why, why on earth are you playing with HTML5?

See below -

If you’re just mucking around then sure, have a play with HTML5. HTML5 is just the latest (partially built) new toy for noobies in the web development sandpit. But if I’m building and/or maintaining a commercial website I can’t think of a single valid reason why I would consider, even for a nano second, using html5.

HTML5 IS NOT EVEN FINISHED YET…!!! and so why use a half baked spec which won’t be officially released for at least a few years and will most likely at least in parts be different to what it is today.

Especially because html5 is only half baked atm, browser support for it varies greatly amongst the browsers. So it never ceases to amaze me that people come waltzing into forums with their brand new shining html5 code and wonder why it works in some browsers and not in others - oh dear :rofl:.

Playing with html5 atm and wondering why it doesn’t always work is a bit like moving into a partially completed house and wondering why the lights don’t work WHEN THE FRIGGIN’ WIRING ISN’T DONE YET. :bouncy3:

Use html5 at your own risk :lol:

When html5 is fiiiiinaaaally released, and it’s better supported by the major browsers, then I’ll have a tinker with it. Until then, it’s a waste of time.

9

I agree with ds and webdev that if the single most important thing about your website is it being bulletproof all the way down to a ie6(over a decade old) then don’t use HTML5.

Apart from that, I find your arguments against html5 weak yet entertaining.

ds, you nailed it - we have very different definitions of what makes a good website. If it serves the users well and is satisfying to make that’s good enough for me.
I don’t care for a religious debate about stuff that doesn’t matter - e.g. you get yourself all worked up over white-space and indenting, It just doesn’t matter.

HTML5 is just the latest (partially built) new toy for noobies in the web development sandpit.

HTML will never be finished, it’s an evolving spec, some of the best web developers are using it already.

So it never ceases to amaze me that people come waltzing into forums with their brand new shining html5 code and wonder why it works in some browsers and not in others - oh dear.

The person waltzing into the forum doesn’t need others calling him a noob and flaming him for asking a simple question.

Neither of you have proposed any serious argument other than dismissing it out of hand.

10

Here’s what I might do with your html, only very minor changes.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>2 Column Layout - Percentage based</title>
<style>
body {
	width: 100%;
	min-width: 960px;
	max-width: 1200px;
	margin: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
	color: #333;
}
#header {
	background-color: #ABC;
}
#main {
	overflow: hidden; /* instead of clearfix */
	width: 100%; /* instead of clearfix */
	background-color: #DDD;
}
#content {
	float: left;
	width: 75%;
	background-color: #EEE;
}
#aside {
	margin-left: 75%;
}
#footer {
	background-color: #ABC;
}
#header, #footer, .inner {
	padding: 20px;
}
</style>
</head>
<body>
<div id="header">

</div>
<div id="main">
	<div id="content">
		<div class="inner">
			<h1>Content</h1>
			<p>Content</p>
		</div>
	</div>
	<div id="aside">
		<div class="inner">
			<p>Content</p>
		</div>
	</div>
</div>
<div id="footer">

</div>
</body>
</html>
11

The browsers don’t have to be a decade old.

I repeat:

I haven’t had a client so far that would be happy with their website working in only some of the major browsers.

And I still haven’t seen your “bullet proof” solution to IE6 as requested by the op using the op’s markup.

“bullet proof” means without the use of javascript because not all users will open the page with js enabled.

12

Especially because html5 is only half baked atm, browser support for it varies greatly amongst the browsers.

Relax, Breathe.

You are wrong. The browser vendors are all working together along with people who care about the spec towards the same goal.
There is a whole host of HTML5 that you can use without any ill-effects. In newer browsers you get benefits, in older you don’t. That’s fine.

13

No, I’m not wrong because you yourself said

The reason the styling isn’t happening in IE 6-8 is because the new html5 elements need to be added with a js script before styles will be applied to them.

I see adding js code just to use some additional html5 elements as a waste of time if I don’t need to use the elements in the first place.

14

not all of them.

<input type=“number” is not supported in IE9 but it is some other browsers.

That’s the point I am making. With varying degrees of support like this, “playing” with html5 for me atm is a waste of time, especially for commercial work.

15

I see adding js code just to use some additional html5 elements as a waste of time if I don’t need to use the elements in the first place.

I agree in part - which is why I don’t use those HTML tags that don’t do all that much really…
I don’t agree with the whole comment - I find some js shims to enable support for newer features great.

Two examples are Doug Crockford’s JSON implementation

Remy sharps localstorage shim

There’s a heap more that can be used which fix a lot of the inconsistencies you’re claiming makes newer features unusable.

not all of them.
<input type=“number” is not supported in IE9 but it is some other browsers.

This is not a problem for me, or HTML5. This is what I am referring to as backward compatible implementation of a feature.
If the browser doesn’t support a number spinner they just get a normal text input. That’s fine.
If they support the spinner, great! they don’t have type the numbers.

These are not mission critical elements, web pages don’t have to look the same in every browser, just makes something that works for real people. That’s all that matters.

16

@markbrown4

still waiting :lol:

The only way I know to make it bullet proof down to IE6 is by ditching the html5 specific elements, which in this case are not needed to get the required layout.

Let’s see how you would make the op’s markup “bullet proof” down to IE6.

It’s the only way you are going to convince me you know what you’re talking about :slight_smile:

17

It’s the only way you are going to convince me you know what you’re talking about :slight_smile:

I don’t actually care about convincing you if you’re stuck in your ways.

still waiting :smiley:

Uh, see post #10

18

Imo that’s ludicrous and I would never do that to a client.

I wouldn’t even waste my time coding an <input type=“number”… in that case.

I would create my own spinner with javascript which would work in all browsers and then only give them preferably a <select> or a text input if javascript is not available.

19

oh dear :frowning:

I said

Let’s see how you would make the op’s markup “bullet proof” down to IE6.

What you have done in post 10 is remove the html5 specific elements which is what I was saying all the time - don’t use html5 because it isn’t finished yet

Your own solution is in fact proving the point I have been making

20

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

What you have done in post 10 is remove the html5 specific elements which is what I was saying all the time - don’t use html5 because it isn’t finished yet

That’s the wrong reason. You don’t seem to be listening to me - but I said in my first reply “I don’t personally use the HTML5 elements yet like section, header, footer because of that reason.” Apart from that one thing, we are in complete disagreement about how a web page should function and the point of HTML5.

Your own solution is in fact proving the point I have been making

I didn’t realise you made a point.