CODEWITHSUNDEEP
htmlcss
user1257497
user1257497

Reputation: 21

DIV centered vertically, relative to window. Scrollable Horizontally. Next to fixed div

Here's an Illustration of what I need.

enter image description here

On the left a fixed div and on the right a horizontally scrolling div that is something like 12000px. I need the right div to center vertically in the window when it is re-sized. I can't get the usual tags I use (position:relative and margin:auto) to work on this. I assume it's because the div overflows on the sides of the screen?

Upvotes: 2

Views: 383

Answers (3)

0b10011
0b10011

Reputation: 18785

Both the width and height are percentage-based (although you can change either to any other type of length that you would like). If you change the width of the left column, be sure to change the left of the right column to be the same. The vertical positioning is done with the top:0;bottom:0;margin:auto 0;height:70%;. Positioning, top/bottom margin, and height must all be set in order for it to work.

Here's the jsFiddle Demo.

HTML

<div id="lc"></div>
<div id="rc">Here's some text that does not wrap. This would be replaced with images, of course.</div>

CSS

<style>
html, body {height:100%;}
#lc {position:fixed; top:0px; left:0px; width:20%; height:100%; background:lime;}
#rc {background:red; height:75%; position:fixed; left:20%;right:0;top:0; bottom:0;margin:auto 0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;}
</style>

Note: Be sure to set the height of all elements from html to #lc/#rc's parent nodes to 100%.

Upvotes: 0

Clint
Clint

Reputation: 491

This interface should accomplish what your mockup shows. Thanks.

http://jsfiddle.net/9tV4y/2/

Upvotes: 2

nlucaroni
nlucaroni

Reputation: 47934

I'm not at all good at laying out pages, but this CSS is what you want for the left, horizontally scrolled, div,

.horizontal_scroll{
    float:left;
    overflow:auto;
    white-space: nowrap;
    width : 500px;
    height : 500px;
}

and applied to the div,

 <div class="horizontal_scroll"> ... </div>

Upvotes: 0

Related Questions