Complex HTML/CSS Layout

Question

I've been a web developer for really quite some time now, but this is something I've never really done, and my progress so far has used some very complex methods. The following is the layout I want, there are rules to this layout though, as I will explain in a moment.

    ----------------------------------------------------
    |                      HEADER                      |
    ----------------------------------------------------
     ________   _______________________________________
    |        | |                                       |
    |        | |                                       |
    |        | |                                       |
    |        | |                                       |
    |        | |                                       |
    |        | |                                       |
    |        | |                                       |
    |        | |                                       |
    |________| |                                       |
               |                                       |
               |                                       |
               |                                       |
               |                                       |
               |                                       |
               |_______________________________________|

The sidebar and the header are static and so is the body, however you can scroll the body. Using the CSS property overflow:scroll on a container for the body section is not an option. The reason being is that it's an ASP.NET application which utilises the maintainpositiononscrollback, meaning that the browser scrollbar - not a contain scrollbar - is what is used to record the x and y position. I have achieved this but using some complex layout techniques which just aren't pretty.

So my HTML looks like the following:

<div id="header">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="#">Telephone</a></li>
    <li><a href="#">My Department</a></li>
    <li><a href="#">My Profile</a></li>
  </ul>
</div>

<div id="sidebar-container">
  <div id="sidebar">
    <!-- sidebar code using ul's and li's -->
  </div>
</div>

<div id="content-top-border"></div>
<div id="content-left-border"></div>

<div id="content-wrap">
  <div id="content">
    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
  </div>
</div>

<div id="content-right-border"></div>
<div id="content-bottom-border"></div>
<div id="bottom-block"></div>

So I use all of these divs for a specific reason, so I can absolutely position borders on the content area. The rest of the divs actually block off content by changing the background colour of them so you can't see the content when you scroll.

My CSS file is far too large to be posting on here, but here's the general idea:

div#header {
    height:30px;
    background-color:#d7d7d7;
    position:fixed;
    top:0;
    left:0;
    right:0;
}

div#sidebar {
    position:fixed;
    top:30px;
    left:0;
    overflow:auto;
    bottom:4px;
    width:148px;
    background-color:#d7d7d7;
}

div#sidebar ul {
    border:1px solid #9a9a9a;
    border-bottom:0;
    font-family:Tahoma;
    margin:0 0 0 4px;
    padding:0;
    list-style-type:none;
    font-size:0.75em;
    width:137px;
    clear:both;
    background-color:white;
}

So as you can see from the sidebar, I set a fixed width, make it position:fixed and then set a background. The containing <ul> has a fixed width thus causing a block. When you horizontally scroll the page, the content will be hidden when it hits the sidebar. This creates an effect much like any client-side application.

#content-wrap {
    position: absolute;
    top: 30px;
    bottom: 15px;
    left: 147px;
    right:0;
    background-color:#d7d7d7;
    z-index:-998;
}

#content {
    z-index:-995;
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    padding:10px 10px 20px 10px;
    background-color:#FFF;
    color:#292929;
}

So you can see that the #content has absolute positioning keeping it in that content box. Anything outside of the content box is never displayed even if you scroll horizontally or vertically.

Are there better ways of doing this? It seems a heck-of-a-lot of HTML/CSS to be doing something really quite simple.

EDIT: This layout isn't a problem whatsoever. That part isn't even difficult. What's difficult is maintaining simple HTML/CSS with a complex layout, and by complex, I don't mean something I'm unable to achieve. I have achieved the desired effect already, I'm just looking for a better way of doing it.

EDIT: This is based on business requirements, I don't have a choice :)

Answer 1

I'd do this with position:fixed and the appropriate margins and width/heights

Answer 2

You could use the markup and css here and adapt it slighty to what you need?

Hope this helps

Answer 3

Fixed position elements are typically a bit of a warning sign for me- by taking things out of the document flow you are losing one of the main benefits of CSS, which is it's flexibility. Again, by mixing px and em measurements you are creating a slightly mixed-up stylesheet jam that doesn't allow for the page to be resized easily.

However the central problem seems to be a question of whether you are barking up the right tree in terms of approach and outcomes. Do you have to be using the maintainpositiononscrollback option from ASP.NET? It wouldn't be too hard to implement a bit of light javascript to create an equivalent effect on an overflowed div. If you are stuck with the asp.net code, do you have to have your text in a small box like that or could you just let the page be as long as the content?

If you have to use the maintainpositionscrollback and you have to have the content in a small box you might be better off using some less standards-friendly code for your markup- perhaps putting the content in an iFrame would give you the behaviour you are looking for. If you're losing most of the benefits of semantic html and css in order to implement the design you want then you're not going to sacrifice much more by taking a different approach to the design.