Beste SD'ers,

Ik zit met een probleem waar ik maar niet uitkom. Ik bouw op dit moment een website met een responsive design.

Mijn opbouw is:
HEADER
MENU LIJN
aside - #main
FOOTER

Nu is het alleen zo, dat als de content in #main heel lang is, de aside klein en kort blijft. Ik wil dus dat de aside dezelfde
hoogte meegroeit als de #main. Het lijkt wel of de 'oude' technieken zoals faux collums en clear niet meer werken. (of ik doe het fout).

Ik heb al tientallen Google resultaten gevonden over dit onderwerp, maar lukken, wilt het niet.
Kunnen jullie mij helpen?

Alvast ontzettend bedankt!

Code:

body
{
	background-image:url('../images/background.jpg');
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
height: 100%;
}	



#wrapper 
{
	width: 96%;	
	max-width: 1000px;
	margin: auto;
	padding-top: 1%;
} 


#main 
{
		width: 74%;
		float: left;
}		
		
aside 
{
		width: 25%;
		float: left;
		background-color:#CCC;
		border-right: 1px solid #999;
		min-height: 100%;  /* deze doet niks */
}


footer 
{
	background: #F00;
	min-width: 1000px;
	height: 100%;
	float: left;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 20px;
}

#menuitemonder
{
	font-family: arial;
	font-size: 17px;
	color: #5b5b5b;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
}


#menuitemonder a
{
	font-family: arial;
	font-size: 17px;
	color: #5b5b5b;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing:0.2pt;
}


#menuitemonder a:visited
{
	font-family: arial;
	font-size: 17px;
	color: #5b5b5b;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
}


#menuitemonder a:hover
{
	font-family: arial;
	font-size: 17px;
	color: #a1ff00;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
}

Code:

<div id="wrapper">
<div id="banner"><img src="images/header_front.jpg" alt="banner" /></div>
<navonder>
<ul>
	<li><a href="#" title="link1" id="menuitemonder">link1</a></li>
	<li><a href="#" title="link2" id="menuitemonder">link2</a></li>
	<li><a href="#" title="link3" id="menuitemonder">link3</a></li>
	<li><a href="#" title="link4" id="menuitemonder">link4</a></li>
        <li><a href="#" title="link5" id="menuitemonder">link5</a></li>
         <li><a href="#" title="link6" id="menuitemonder">link6</a></li>
</ul>
</navonder>


<aside>
<h1>Sub-section</h1>
<p>Dit blok is de linkerkant van de website</p></aside>

<section id="main">
<br />
<p>Dit is het main gedeelte.</p>
</section>
<footer>footer</footer>
​</div>

De aside en main samen in een div stoppen met display: block; height: auto; width: 100%; zou moeten werken.

Bedankt voor je antwoord Chiel.

Ik heb het toegepast maar geeft geen extra resultaat. Je zou verwachten dat er dan een hard vierkant blok om de aside en main heen komt, maar dat is niet het geval. Mogelijk dat een <aside> en een <section id="main"> niet samen in één div geplaatst kunnen worden als vast blok oid.

Jij of iemand anders nog een idee?

Maak van <section id="main"> dan ook <main id="main">.
Geef de extra DIV die je er omheen hebt geplaatst is een kleurtje, en screenshot dat is.

Je float die blokken namelijk, een mogelijke oplossing is dan ook nog dit:In de div die je om de twee blokken heen hebt geplaatst (we nemen als voorbeeld dat je die #div hebt genoemd).

Voeg dan dit even toe:
#div:after{
content: "";
display: table;
clear: both
}

Misschien heb je iets aan dit artikel?

Uiteindelijk werkte het toevoegen van een clear: both; na de 2 blokken.
Vervolgens verhielp box-sizing: border-box; ook een hoop.

Dank Chiel voor je hulp via een PM. Ook dank voor samenvatting, wat er precies hielp!