Menu
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?
833
In short, a sidebar is a column placed to the right or left of a webpage's primary content area. They're commonly used to display various types of supplementary information for users, such as: Navigational links to key pages.
I like to use an absolutely positioned sidebar, then set the padding on the wrapper to the width of that element. Then I either set the margin-padding on the other elements, or I add it to the padding on the wrapper.
http://jsfiddle.net/jAVQv/
<div class="container">
<div id="sidebar"></div>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
.container { position:relative; padding:0 0 0 55px; }
#sidebar {
position:absolute;
top:0; bottom:0; left:0;
width:50px;
background:#000;
}
#header { border:1px solid #000; width:100px; height:20px;
margin:0 0 5px 0;
}
#content { border:1px solid #000; width:100px; height:50px;
margin:5px 0 5px 0;
}
#footer { border:1px solid #000; width:100px; height:20px;
margin:5px 0 0 0;
}
I'd use HTML5 elements to give the markup semantic meaning.
<body>
<aside><!-- Nav bar --></aside>
<article>
<header>...</header>
<section>...</section>
<footer>...</footer>
</article>
</body>
Then style aside and article with float: left.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
