HTML layout: adding sidebar column to existing site
I have a site with a body that looks like that:
<body>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
No absolute / relative positioning tricks are used in these divs, but
there are a lot of floats, clears, margins and paddings in styles of these
divs and their inner elements. All this yields a site that looks like
that:
„¡„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„¢
„ header „
„¤„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„£
„¡„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„¢
„ content „
„¤„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„£
„¡„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„¢
„ footer „
„¤„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„£
My question is: how do I add one independent fixed-width left column
(sidebar) with extra content that would contract whole site
(header-content-footer) and shift them to the right.
„¡„Ÿ„Ÿ„Ÿ„Ÿ„¢„¡„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„¢
„ side„ „ header „
„ bar „ „¤„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„£
„ „ „¡„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„¢
„ „ „ content „
„ „ „¤„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„£
„ „ „¡„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„¢
„ „ „ footer „
„¤„Ÿ„Ÿ„Ÿ„Ÿ„£„¤„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„Ÿ„£
I know of one almost-ideal solution, but it is ugly and requires
re-nesting existing divs:
<body>
<table>
<tr>
<td id="sidebar">...</td>
<td>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</td>
</tr>
</table>
</body>
Is it possible to do so elegantly, just adding one external sidebar
element somewhere in body, i.e., like that?
<body>
<div id="sidebar">...</div>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
I've tried naive approaches - such as styling:
#sidebar { float: left; width: 20em; }
or
#header { margin-left: 20em; }
#content { margin-left: 20em; }
#footer { margin-left: 20em; }
This kind of works, but it breaks as soon clear: both or clear: left is
encountered in header/content/footer.
So, are there any alternatives to table solution?
No comments:
Post a Comment