up vote 2 down vote favorite

I'm working on a web design that has a fixed sidebar and breadcrumb header, and a scrollable content section taking up the remaining space. Here's what I envision the end result looking like:

Layout Mockup

The rub is, I can't figure out how to make this work without nasty container <div>s or hacky CSS. I like semantic HTML (HTML 5, for this specific project) so I don't really want to budge on keeping styling elements out of the markup.

The sidebar will have two fixed widths (expanded and collapsed) and the header will always have a fixed height.

This is (essentially) how I'd like the markup to look:

<body>
    <aside>
        <!-- sidebar content -->
        <h1>My Site</h1>
    </aside>
    <section>
        <nav>
            <!-- breadcrumbs -->
            <a href="#home">Home</a>
            <a href="#area">Area</a>
            <a href="#category">Category</a>
            <a href="#">Item</a>
        </nav>
        <article>
            <!-- page content -->
            <h2>Item Title</h2>
            <p>
                Item Content
            </p>
        </article>
    </section>
</body>

Can someone help me make the CSS work for this?

Edit: My CSS thus far:

html {
    font-family: "Segoe UI", sans-serif;
    font-size: 9pt;
    height: 100%;
}
html body {
    margin: 0px;
    height: 100%;
    padding: 0px;
}
html body aside {
    background-color: rgb(32, 80, 128);
    float: left;
    height: 100%;
    width: 256px;
}
html body section {
    background-color: rgb(16, 40, 64);
    height: 100%;
    margin-left: 256px;
}
html body section nav {
    background-color: rgb(242, 242, 242);
    height: 32px;
}
html body section article {
    background-color: rgb(255, 255, 255);
    margin: 0px 32px 32px 32px;
}
share|improve this question
1  
What CSS do you have so far? – TNC Feb 17 '11 at 1:34
I amended my post. – Adam Maras Feb 17 '11 at 1:42
html body { -- are you expecting a <body> tag somewhere OUTSIDE of the <html> tag?? – drudge Feb 18 '11 at 20:48
I get OCD about my CSS specificity during development. Don't worry, it'll get trimmed for production. Makes me feel better :) – Adam Maras Feb 18 '11 at 20:55

2 Answers

up vote -1 down vote accepted

You should position the "nav" element between the "aside" and "section" elements. Then this should do the trick (add more content to the "article" element to trigger the scrollbar):

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style type="text/css">
      * {margin:0;padding:0;}
      aside,section,nav,article {display:block;}
      body {background: rgb(16, 40, 64);}
      html,body,aside {overflow:hidden;height:100%;}
      aside {background: rgb(32, 80, 128);float:left;width: 256px;}
      section {position:relative;margin:0 -256px 0 256px;overflow:auto;}
      nav {background: rgb(242, 242, 242);height: 32px;}
      article {background: rgb(255, 255, 255);margin:32px;}
    </style>
  </head>
  <body>
    <aside>
      <!-- sidebar content -->
      <h1>My Site</h1>
    </aside>
    <nav>
      <!-- breadcrumbs -->
      <a href="#home">Home</a>
      <a href="#area">Area</a>
      <a href="#category">Category</a>
      <a href="#">Item</a>
    </nav>
    <section>
      <article>
        <!-- page content -->
        <h2>Item Title</h2>
        <p>Item Content</p>
      </article>
    </section>
  </body>
</html>
share|improve this answer
does this work for anyone? no scrolling in latest chrome with lots of added content – kinet Feb 22 '11 at 1:32
up vote 1 down vote

The best bet would be to use CSS. It is all about positions n' stuff. You don't have to use divs but it will be much better than assigning classes or ids to everything you make. Code below will make your sidebar stay at one place and for the content, just make it float right. I think you're good to go

position: fixed; /*--Fix the sidenav to stay in one spot--*/
float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
share|improve this answer
Not even wrong. – Jordan Reiter Jul 28 '11 at 19:25

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.