Reputation: 431

Half fixed, half scrollable layout that can be scrolled

I have an exotic design that needs the following. The left side must scroll, while the right side + top head must stay put (fixed). See attached image.

I can accomplish this by position: fixed on the top and right side. The top & right hand side stays put while the left scrolls.... BUT then the PROBLEM is that there is NO scroll bar anymore if anybody zooms in and you also cannot scroll left to right to see whole page

How would one attack such a layout?

Could not post code before - let me try again:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exotic</title>


<style type="text/css">
#top {
background-color: #FF0;
width: 1800px;
height: 50px;
position: fixed;
left: 0px;
top: 0px;
}

#sideLeft {
float: left;
width: 950px;
background-color: #9C0;
clear: left;
}

#sidebarLeft {
background-color: #0CC;
height: 800px;
width: 300px;
float: left;
}

.list {
float: left;
width: 600px;
margin-top: 100px;
}
#ordoner {
background-color: #F90;
float: left;
width: 640px;
height: 800px;
position: fixed;
top: 50px;
left: 950px;
}

#sidebarRight {
width: 210px;
height: 800px;
position: fixed;
top: 50px;
left: 1590px;
background-color: #0CF;
}

</style>
</head>

<body>
<div id="top">
</div>
<div id="sideLeft">
  <div id="sidebarLeft"><!--end #sidebarLeft--></div>
  <div class="list"><!--end .lisist--></div>
<!--end #sideLeft--></div>
<div id="ordoner"><!--end #ordoner--></div>
<div id="sidebarRight"><!--end #sidebarRight--></div>
<div id="footer"></div>
</body>
</html>

enter image description here

Clarification: My css reflects 2 things in the right hand side but the point is that the right and the top should be static while the left scrolls... AND they should be horizontally scrollable IF a user zooms :)

Also, I've tried wrapping things in a container div, but that has its own problems - it scrolls but never reaches the right hand side if the window is not maximized.

Thanks again.

To clarify: As an example to get my point across... please resize the stackoverflow window to half your horizontal screen size... Now see how you can scroll left to right? If you zoom in, you can scroll left to right also to see the whole page. Well, in my layout, which works in full screen browser mode... once I resize that scroll bar at the bottom does not appear at all leaving the user with no ability to scroll horizontally. See picture below

Fiddle http://jsfiddle.net/moby7000/tWb3e/

enter image description here

Upvotes: 17

Answers (3)

avrahamcool

Reputation: 14094

It's not very hard to create a layout like this.

* {
  margin: 0;
  padding: 0;
}

html,
body,
.Container {
  height: 100%;
}

.Container:before {
  content: '';
  height: 100%;
  float: left;
}

.Header {
  margin-bottom: 10px;
  background-color: #6ea364;
}

.Content {
  position: relative;
  z-index: 1;
}

.Content:after {
  content: '';
  clear: both;
  display: block;
}

.Wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

.Wrapper>div {
  height: 100%;
}

.LeftContent {
  background-color: purple;
  overflow: auto;
}

.RightContent {
  background-color: orange;
  float: right;
  margin-left: 10px;
}

<div class="Container">
  <div class="Header">
    <p>The Header div height is not fixed (But it can be if you want it to)</p>
    <p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, Opera. using Pure CSS 2.1 only</p>
  </div>
  
  <div class="Content">
    <div class="Wrapper">
      <div class="RightContent">
        <p>You can fix the width of this content.</p>
        <p>If you want, its width will stretch just as it needs to.</p>
      </div>
      
      <div class="LeftContent">
        <p>this will scroll</p>
      </div>
    </div>
  </div>
</div>

Bonus: With a little change in the CSS you can create a beautiful scrolling. See that Fiddle

If you want to set a width value to the left side, that is actually bigger then the body size (and to have an horizontal scroll), do it that way.

<div class="LeftContent">
    <div style="width:1200px;"> <-- better to aplly the width from the CSS
        ..<The content>..
    </div>
</div>

Upvotes: 18

aaronmallen

Reputation: 1438

you need to add overflow:auto; to the area you want to scroll.

Upvotes: 1

Arcadio Garcia

Reputation: 549

Have you tried

overflow-y: scroll;

in body?

Upvotes: 0

Half fixed, half scrollable layout that can be scrolled

Answers (3)

Related Questions