Menu
I'm doing a fixed sidebar that I resolved here in stack overflow, so now I have a fixed bar with this code:
<div id="main" style="width:100%;background:red;">
<div id="sidemenu" style="float:left;height:200px;background:#000;">
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
</div>
<div id="content" style="height:200px;overflow-y:scroll;background:silver;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
It has a height of 200px (just to see how it works), but the sidebar I need has to have a height of 100% all the time. I have seen various posts here in stackoverflow that say that faux columns is a option: http://www.alistapart.com/articles/fauxcolumns/ . But inside my <div id="sidebar"> I'll have, in some cases, 2 more DIVs: #menu and #submenu, so the width will vary.
What can I do? I don't need support for old browsers: IE9, latest Chrome and latest Firefox is OK.
261
I'd add a border-left to the body, get the longest menu item and match it's width in ems, then set a negative margin on the sidemenu. Then it'll appear to match whatever height the content div takes up (either if you set it explicitly, or if content expands it):
<body style="border-left: 10em solid #666;">
<div id="main" style="background:red;">
<div id="sidemenu" style="float:left;margin-left: -10em;width:10em;background:#666;">
menu<br />
menu<br />
menu<br />
very long menu item<br />
menu<br />
menu<br />
</div>
<div id="content" style="height:400px;background:silver;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
</body>
For a sidebar with a textured background (one method), you could set the width in pixels to match the width of the texture (not as flexible as ems but if set to the widest item, should be okay) and the texture repeats along the y-axis:
<div id="main" style="background: url(pattern_157.gif) repeat-y;">
<div id="sidemenu" style="float:left;width:200px;background: transparent;">
menu<br />
menu<br />
menu<br />
very long menu item<br />
menu<br />
menu<br />
</div>
<div id="content" style="height:600px;background:transparent;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
Is the problem that your column background has some kind of gradient? If it's just solid colour, could you not just leave the widths of the 2 columns unset, and tile the background image on the x axis as well as on the y axis?
36
Here is another idea for this using fixed positioning and height of 100%. I also put enough breaks in there to show how the content will scroll, but the sidebar and its contents will stay where they are.
<body style="margin:0;">
<div id="main">
<div id="sidemenu" style="width:200px; position:fixed; height:100%; background: url(http://www.bittbox.com/wp-content/uploads/2007/12/free_grunge_paper_1.jpg) repeat;">
menu<br />
menu<br />
menu<br />
very long menu item<br />
menu<br />
menu<br />
</div>
<div id="content" style="background:transparent; float:left; margin:0 0 0 220px;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
</body>
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
