Home/ Questions/Q 928845
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T20:04:34+00:00

I am trying to learn and use html5 and have a basic layout but

  • 0

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" 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="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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0