ansaurus

Question

Equal faux cols for simple html5 layout-help needed

Answer 1

A:

I feel that CSS doesn't give us suitable solutions to entire classes of problems similar to yours. Putting together a simple layout shouldn't devolve into a contest of wits and a guessing game.

Therefore, against the protests of lots of CSS purists, I use and recommend tables for layout. Not indiscriminately, but when CSS fails to deliver.

Done with tables, your problem suddenly becomes trivial.

EDIT

Done. "fixed-up" code in pastebin.

It looks a bit garish but can be tweaked to look the way you wanted, I'm sure.

Carl Smotricz 2010-07-16 09:17:45

CSS purists, though, will probably advise you to use CSS3 columns with your HTML5, which specifically address this problem. As usual, unfortunately, you're going to have to wait a while for the browsers to catch up, and then a bit longer for the user base to catch up with the browsers :(

Matt Gibson 2010-07-16 09:21:31

Thanks everyone for helpful replies. I am now looking at the table method to achieve the equal columns...but this will probably take me somewhile to code! If anyone can edit my code quickly as an example, it would be very helpful and I would be very grateful! Many thanks

rpd 2010-07-16 10:31:48

I've packed your HTML into table form (putting my money where my mouth is). Link in my answer. You'll want to get rid of my background-colors and the `border=2`, and maybe specify widths for the table cells. Your `DIV`s will want something like `height: 100%` to fill the table cell heights, or you can simply background-color the table cells rather than your DIVs.

Carl Smotricz 2010-07-16 10:49:54

rpd 2010-07-16 11:15:56

Answer 2

+1 A:

This is the best method of keeping three columns the same height, that I have seen so far. It require extra markup in your HTML unfortunately. Plus it isn't specific to HTML5, but changing the tags isn't a problem.

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

danixd 2010-07-16 09:20:44

Good solution, +1! But personally I consider this a horrible hack: So much effort and coding to fake a result that should have been much easier to express.

Carl Smotricz 2010-07-16 09:28:07

Answer 3

A:

If you are aiming for "HTML5" and "CSS3" you can use display: table-*

nav, article, aside {
  display: table-cell;
}

RoToRa 2010-07-16 09:24:58

Answer 4

A:

I could not really figure this out! I see so many css/jscript/jquery fixes on internet search my brain is overloading! I didn't much like the table code so I have left that approach for now! All I have done is add a 'mid-section' div (div mainarticle) with a background image (is that the 'faux col' method?). Anyway I have now a simple html5 layout page (which has nearly driven me nuts to get- I am not good at css coding!!). Here is my current code:

``<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type ="text/css" href="rpdnewstyle.css" media="screen" >

<title>RPD simple html5 example
</title>
<!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
    <![endif]-->    

</head>
<body>
<div id="wrap">
<div id="page">

<header>
<h1>Header content area</h1>
</header>

<nav>
<p>Nav content area for links-horizontal or vertical</p>
</nav>
<div id="mainarticle">

<article>
<section>
 <p>&lt;article&gt; - Defines an article</p>
</section>
<section>
ARTICLE content
 Lorem ipsum.......................
.....................................
.....................................
</section>

<section>
Article Content 2
 Lorem ipsum.......................
.....................................
.....................................
Nulla euismod commodo libero sit amet viverra. 
Fusce mauris elit, gravida sit amet luctus eu, sodales sit amet ipsum. 
Donec tincidunt tincidunt quam, vel faucibus magna tristique et. 
Duis quis enim arcu. Nam varius luctus tempus. Suspendisse potenti. 
Duis iaculis eleifend diam. Etiam volutpat tincidunt dolor, 
id dignissim risus pellentesque in. Nam ullamcorper felis 
sed nisl luctus tincidunt. In metus tellus, pretium in fermentum nec, 
posuere vitae turpis. Nulla facilisi. Aenean id purus eros, sed dignissim massa. 
Sed condimentum mollis nunc nec aliquet. Pellentesque porta arcu vel massa rutrum 
pellentesque. Aliquam consectetur volutpat sodales. Vivamus porttitor pellentesque elit, 
nec vestibulum lacus vestibulum laoreet. Aliquam erat volutpat. 
Cras molestie tellus non dolor volutpat fringilla. Morbi ut justo justo, 
eu euismod sapien. Curabitur iaculis metus in ligula ultrices volutpat. 
</section>
</article>

<aside>
 <p>&lt;aside&gt;  - Defines an aside</p>

ASIDE Content (sidebar)

</aside>
</div>
</div>
<footer>
Page footer content area
</footer>
</div>
</div>
</body>
</html>

and the css:

    /* CSS Document */
html  {
 margin:0; padding:0;
}
body { 
margin:0; 
padding:0; 
line-height: 1.5em; 
font-family:Geneva, Arial, Helvetica, sans-serif; 
}

#wrap {
 width:900px;
 margin:0px auto; 
 }

header { 
border:1px solid #000; 
height:135px; 
background:#DEDEDE; 
margin-bottom:0px; 
width:100%;
}

h1 { margin-top:45px; 
}

#mainarticle { 
border:1px solid #000; border-top:none; 
background:#fff; 
width:900px;
background: url(images/faux-2-2-col.gif);
margin-bottom: 0px;
overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
}

#page{
 width:900px;
 margin:0; auto;
 text-align:center;
}

header, footer, nav, article, section, aside {
    display:inline-block;
}

nav {
    width:100%;
    background-color:#F0F8FF;
    float:left;
     border:1px solid #000;
}

nav ul{
 width:100%;
 list-style:none;
 margin:0;
 padding:0;
}

nav ul li{
 display:inline;
 padding:3px 7px;
}

nav span{
 float:right;
 display:inline-block;
}

aside {
    width:20%;
    display: table-cell;
    display:block;
    margin:4px 2px;
    padding:10px;
    float:right;
    margin-top:10px;
    margin-bottom:10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

article {
    display: table-cell;
    width:70%;
    background-color:#B0E2FF;
    margin:4px 2px;
    padding:10px;
    float:left;
    margin-top:10px;
    margin-bottom:10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

section {
    display:block;
    background-color:#E0FFFF;
    font-family:Cambria, Verdana, Arial, sans-serif;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    margin:4px 2px;
    padding:10px;
    }

footer { width:100%;
    background-color:#000;
    margin-top:0px;
    height:50px;
    clear:both; 
  color:#fff; 
   border:1px solid #000;
  }

What a performance! The joys of css and html5.. Unbelievably now I am going to code an html5 Wordpress theme based on this template...I think I am going mad!!:-) Thanks for all help & best wishes to all!

rpd 2010-07-17 22:09:42

ansaurus

tags:

views:

answers:

Equal faux cols for simple html5 layout-help needed

related questions