Equal faux cols for simple html5 layout-help needed_问答_开发者

I am trying to learn and use html5 and have a basic layout but the sidebar (aside) and section (content) elements are not equal in length and I want them to be equal. I have been trying to fix this with faux column method but with no success yet. I have had several attempts and my last attempt so far I used a background image in 'mid-section' div but this isn't displaying!

I show the html5 and css code here and am grateful for some advice and help on what I need to do to get the columns equal length.

<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type ="text/css" href="stylev1.css" med开发者_运维百科ia="screen" >

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

</head>
<body>
<div id="page">
<header>
<h1>Header content area</h1>
</header>

<nav>
<p>Nav content area for links-horizontal or vertical</p>
</nav>
<div class="mid-section">

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

<section>
Article Content 2
 Lorem ipsum.......................
.....................................
.....................................
</section>
</article>


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

ASIDE Content (sidebar)

</aside>

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



    /*CSS reset-basic! */

html  {
margin:0; padding:0;
}

#page{
 width:960px;
 margin:0 auto;
 text-align:left;
}

body {
 background-color:#5B5C58;
 color: #000000;
 font-family:Calibri, Verdana, Arial, sans-serif;
 font-size: 14px;
 text-align:center;
 margin:0;
}

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

header {
 width:100%;
 margin-bottom:10px;
 background-color:green;
 width;50px;
}

nav {
 width:100%;
 background-color:#F0F8FF;
 float:left;
}

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;
}

.mid-section {
color:red;
background: url(images/rpdsimplehtml5fauxcols6.png) repeat-y;
}


aside {
 width:30%;
background-color:#B0E2FF;
 margin:4px 2px;
 padding:10px;
 float:right;
 margin-top:10px;
 margin-bottom:10px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
}

article {
 width:65%;
 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:#82CFFD;
 margin-top:10px;
 height:50px;
 clear:both;
}

I am most grateful for helpful replies, thanks

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.

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

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

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

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"></script>
    <![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!