Question

I must slice a website which needs to be full-width and full-height (no scroll).
Its structure is very easy : the body has a 20px border (inside) a sidebar and a content, where will be a horizontal slider ( see image below ).

My problem is, what do you recommend to me for setting sidebar width ?
Would you recommend to me to use fixed width for sidebar and jquery for calculate the width of the content or is better to use width for sidebar and also for content in percents ?
If there is a better way let me know.

Note : I develop it in SCSS(CSS3) and HTML5 and it also should be compatible with talbets

Answer 1

You could use a % width for your sidebar, but also provide min-width and max-width values. Something like this.

Code for the demo

---

Relevant HTML:

<div class='sidebar'></div>
<div class='content-wrp'>
    <ul class='content'>
        <li class='slice'></li>
        <!-- and so on -->
    </ul>
</div>

Relevant CSS:

html, body, .sidebar, .content-wrp, .content, .slice {
    box-sizing: border-box;
    margin: 0;
    height: 100%;
}
body { border: solid 20px lightblue; }
.sidebar {
    float: left;
    min-width: 10em; width: 20%; max-width: 32em;
}
.content-wrp {
    overflow-x: scroll; overflow-y: hidden;
    padding-bottom: 1em; 
}
.content { width: 4000px; }