I'm designing a CSS template that will consist of four sections:-
The Side navigation & main content will be rendered along side each other, (25%, 75%) width.
My question, is should these two sections be in another container, or should they sit on the page at the same level as the header & footer?
Depending on your requirements (which seem very simple right now). You can do both so I think you should minimize markup and set them at the same level as header and footer.
Here is an example of what you could do :
<header></header>
<nav></nav>
<main></main>
<footer></footer>
CSS :
header, footer {
height: 200px;
background:green;
clear:both;
}
nav, main {
float:left;
width:25%;
height:500px;
background:gold;
}
main {
width:75%;
background:red;
}
Side bar and navigation can be down this way within their own container which is on the same level as the header and footer.
HTML
<div class="container">
<div class="sidebar">
</div>
<div class="main-content">
</div>
</div>
CSS
.container {
width:100%
}
.sidebar {
float:left;
width:25%
}
.main-content {
float:left;
width:75%;
}
OR they can both be on the same level as the header and footer, as below (but may have issues if one doesn't have as much content as the other, which can be fixed using clear:both):
HTML
<div class="sidebar">
</div>
<div class="main-content">
</div>
CSS
.sidebar {
float:left;
width:25%
}
.main-content {
float:left;
width:75%;
}
You should use the same level. What you're trying to achieve is possible through CSS and the sections should be simple and logical. Too much nesting makes for a mess and makes it harder to code correct CSS. Here's some sample HTML:
<html>
<head>
<title>My website</title>
<!-- And the rest of the head stuff, including a link to your CSS -->
</head>
<body>
<header>
<h1>My website</h1>
<nav id="headnav">
<ul>
<li>Login</li>
<li>About</li>
</ul>
</nav>
</header>
<nav id="mainnav">
<ul>
<li>First page</li>
<li>Second page</li>
<li>Third page</li>
</ul>
</nav>
<main>
<h2>Main content</h2>
<p>This is some main content text.</p>
</main>
<footer>
<p>Copyright and cookies and bears, oh my...</p>
</footer>
</body>
</html>
Then you position the stuff where you want it by using CSS. Any superfluous tags should always be stripped away. Here's some CSS to go along with the HTML:
header {
clear: both;
width: 100%;
}
nav#mainnav {
width: 25%;
float: left;
}
main {
width: 75%;
}
footer {
clear: both;
width: 100%;
}
