Apologies for my not-so-great English.
To better understand my issue, please refer to this fiddle and this fiddle.
Focus on the <nav></nav> section. If there are only a few elements in the menu, the next block <section></section> will be positioned right after the menu. However, if there are many elements in the menu, everything looks fine because the nav has sufficient width.
How can I achieve the following:
Additionally, the nav should always be 100% width regardless of the number of elements.
HTML <body> snippet:
<body>
<div class="wrapper">
<header>
<center>
<!-- logo and headers here -->
</center>
</header>
<nav>
<!-- menu here -->
</nav>
<section>
<header><h1>Lorem ipsum</h1></header>
<!-- main content here -->
</section>
<aside>
<section>
<header>
<h1>Lorem ipsum</h1>
<!-- block content here -->
</header>
</section>
</aside>
<footer>
</footer>
</div>
</body>
CSS snippet:
body {
color: #8f8f8f;
background-color: #f8f8f8;
background: url(../images/background.jpg) 50% 50% no-repeat #f8f8f8;
/* border: 5px solid #7e7e7e;*/
margin: 0;
}
.wrapper {
max-width: 960px;
margin: auto;
border: 1px solid #7e7e7e;
}
header {
padding: 20px 0;
margin: auto;
}
aside, section {
margin-top: 10px;
}
section {
float: left;
width: 700px;
padding-bottom: 50px;
border: 5px solid #ccc;
}
aside {
float: right;
width: 240px;
border: 1px solid #ccc;
}
aside section
{
width: 230px;
margin-top: 0px;
}
footer {
clear: both;
}
h1, h2, h3, h4, h5, h6 {
margin: 0px;
padding: 0px;
}
section header {
background-color: #CCCCCC;
padding: 5px 0;
margin: 0px;
}
section header h1 {
padding-left: 20px;
}
section p {
padding: 10px 20px;
margin: 0px;
}
/* CSS for nav */