Home/ Questions/Q 6787253
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T17:20:39+00:00

I’m doing a fixed sidebar that I resolved here in stack overflow , so

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0