My website has a structure like this:
<body>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
The layout consists of floats, clears, margins, and paddings in the styles of these elements. This results in a site that looks like this:
┌───────────────┐
│ header │
└───────────────┘
┌───────────────┐
│ content │
└───────────────┘
┌───────────────┐
│ footer │
└───────────────┘
I want to add an independent fixed-width sidebar column with extra content that will contract the whole site (header-content-footer) and shift them to the right.
┌────┐┌─────────┐
│side││ header │
│bar │└─────────┘
│ │┌─────────┐
│ ││ content │
│ │└─────────┘
│ │┌─────────┐
│ ││ footer │
└────┘└─────────┘
I have thought about using a table layout, but would prefer a more elegant solution without re-nesting existing divs. Is there a way to achieve this by simply adding an external sidebar element somewhere in the body, like so?
<body>
<div id="sidebar">...</div>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
I've tried some basic styling approaches:
#sidebar { float: left; width: 20em; }
or
#header { margin-left: 20em; }
#content { margin-left: 20em; }
#footer { margin-left: 20em; }
While these solutions somewhat work, they break when encountering clear: both or clear: left in the header/content/footer.
Are there any alternatives to using a table layout for this design challenge?