CODEWITHSUNDEEP
htmlcsscss-float
dislick
dislick

Reputation: 677

How can I realize a CSS layout with a fixed sidebar and scrollable content?

I'd like to create such a layout:

Prototype of what I'd like to achieve

Red: Fixed sidebar that expands to the right when opened.

Blue: Content, scrollable and should move to the right when the sidebar expands

Now, when I try to code this using the float attribute, the sidebar scrolls too. How can I create a fixed sidebar that doesn't scroll? The content on the right however should still scroll.

.sidebar, .content {
    float: left;
}

JSFiddle Demo

Thank you for your time.

Upvotes: 1

Views: 4632

Answers (4)

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this

http://jsfiddle.net/6tMFm/28/

CSS

.sidebar {
    background-color: #f12f2f;
    width: 50px;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    overflow-x:scroll;
}

.sidebar.extended {
    width: 100px;

}

.content {
    background-color: #4c8ae8;
    width: 200px;
    left:65px;
    top:0;
    position:absolute;
    padding:10px;
}

.sidebar, .content {

height: 1000px;
width:auto;
float:left;
position:absolute;
right:0;

}

.clearBoth {
    clear: both;
}

HTML

<div class="sidebar">Fixed Side</div>
<div class="content">loremipsum<br/><br/>lorem ipsum<br/><Br/>loremipsum<br/><br/>lorem ipsum<br/><Br/>loremipsum<br/><br/>lorem ipsum<br/><Br/>loremipsum<br/><br/>lorem ipsum<br/><Br/>loremipsum<br/><br/>lorem ipsum<br/><Br/>loremipsum<br/><br/>lorem ipsum<br/><Br/>loremipsum<br/><br/>lorem ipsum<br/><Br/>loremipsum<br/><br/>lorem ipsum<br/><Br/>loremipsum<br/><br/>lorem ipsum<br/><Br/></div>
<div class="clearBoth"></div>

Upvotes: 1

dislick
dislick

Reputation: 677

Thank you everyone, but this is the solution I was looking for:

.content {
    background-color: #4c8ae8;
    width: 200px;
    overflow: auto;
}

.actual-content {
    height: 1000px;
}

HTML:

<div class="content">
    <div class="actual-content">Lorem ipsum</div>
</div>

No additional JS is required and it's dynamic (e.g. when the width of the sidebar changes)

Upvotes: 1

Alex
Alex

Reputation: 9031

UPDATED

Set the side bar position:fixed

http://jsfiddle.net/6tMFm/3/

Upvotes: 1

Arun Bertil
Arun Bertil

Reputation: 4648

Try position:fixed for .sidebar

.sidebar {
    background-color: #f12f2f;
    width: 50px;
    position:fixed;
}

Upvotes: 0

Related Questions