Strange layout...is it possible at all?

HTML & CSS
1

Hi there,

I’ve got a really hard time to get over the layout I am figouring out to get. This is how I want…at this moment I am not really sure it is possible at all. Here are prescriptions
a) At the top of the site header which is width of 100%
b) Main content is divided to two columns: left and right
c) these two columns should be fluid for example 30% and 70% width.
d) right column is actually the main content and it should be scrollable by browser scrollbar if it is higher than browser height - standard.
e) left column should be actually fixed positioned, so the scroll from the browser shouldn’t scroll it down but the content of this column shouldbe scrolled itself by contener scrollbar.

Actually I really don’t know if this kind of layout can be done by pure css. At one hand I would like to resize width of the columns dynamically (depend of the width of browser) at the other hand the left column should be fixed and scrollable within its contener…ough.

Please, any advice may be very helpful

slapi

2

Just knocked this up and it should be a start




<!document html>
<head>
<title>Test</title>
<style type='text/css'>
 #head {position:fixed; top:0px; left:0px; width:100%; height:4.2em; 
             text-align:center; background-color:#ff9; color:#333}
 #left {width:29%; position:fixed; top:5.5em; left:0px; height:4.2em; 
          text-align:center; background-color:#cfc; color:#333}
 #right{width:70%; float:right; margin-top:20em; 
           background-color:#9ff; color:#333}
</style>
</head>
<body>

  <div id='head'>
    <h1>title</h1>
  </div>

  <div id='content'>
  
    <div id='left'>
      <a href=''>link: 1<a><br />
       <a href='#'>link: 2<a><br />
       <a href='#'>link: 3<a><br />
       <a href='#'>link: 4<a><br />
       <a href='#'>link: 5<a><br />
       <a href='#'>link: 6<a><br />
       <a href='#'>link: 7<a><br />
       <a href='#'>link: 8<a><br />
       <a href='#'>link: 9<a><br />
       <a href='#'>link: 10<a><br />
       <a href='#'>link: 11<a><br /> 
  </div>

    <div id='right'>
           This is a test to see if it works.<br />
           This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
           This is a test to see if it works.<br />
           This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
           This is a test to see if it works.<br />
           This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
           This is a test to see if it works.<br />
           This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
           This is a test to see if it works.<br />
           This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
    </div>
  
  </div>

</body>
</html>
3

I’ve changed your code a little bit. This time it works almost I would like but…
If you downsize the browser height, left columns appear scrollable which is fine and exptected to me, but the whole scrollbar area is bigger than actual left column because of header height I think. So I can’t see the bottom of the scrollbar of the left column. Is it possible to do the whole scrollbar (and of course the content) visible? Thanks

This is the allmost working code

<!document html>
<head>
<title>Test</title>
<style type='text/css'>

 #head {position:fixed; top:0px; left:0px; width:100%; height:4.2em;
             text-align:center; background-color:#ff9; color:#333}
 #left {width:29%; position:fixed; top:5.5em; left:0px; height:100%;
          text-align:center; background-color:#cfc; color:#333; overflow:auto;}
 #right{width:70%; float:right; margin-top:5em;
           background-color:#9ff; color:#333}
</style>
</head>
<body>

  <div id='head'>
    <h1>title</h1>
  </div>

  <div id='content'>

    <div id='left'>
<p>This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.</p>
<p>This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.</p>
<p>This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.</p>
<p>This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.</p>
<p>This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.</p>
<p>This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.</p>
<p>This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.</p>
<p>This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.This is a test to see if it works.</p>		

  </div>

    <div id='right'>
           This is a test to see if it works.<br />
           This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
           This is a test to see if it works.<br />
           This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
           This is a test to see if it works.<br />
           This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
           This is a test to see if it works.<br />
           This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
           This is a test to see if it works.<br />
           This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
            This is a test to see if it works.<br />
    </div>

  </div>

</body>
</html>
4

HI,

Just lose the 100% height and use bottom instead.


 #left {width:29%; position:fixed; top:5.5em; left:0px; [B]bottom:0;[/B]}

(Won’t work in IE6 though of course as it doesn’t understand position:fixed.)

5

Thank you for responses. Setting bottom got it right.

I’ve got one more issue with this layout and still can’t solve it by myself. Left and right columns width is calculated by percents (%). I still would like to have a minimum width of left column. The problem is when I setting to for example 250px wide, then the right column goes below the left column when dowsize the width. I really doesn’t understand why it doesn’t work. I also set up the min-width of right column and the results are the same.

slapi

6

You’d be better setting the narrow column to a fixed width from that start and then just setting the right column to have a margin-left to clear it. No need to float the right column and no need for widths on it. Just give it a margin-left wider than the left column.

7

Yes, that was my initial point to setup fixed width of left column but then started thinking about 30%/70% width and it seems to be better solution to my future app. Now I now, that min-width property is necessary but can’t figure out how to get it right. Eventually I will set the left column to fixed width again, but isn’t really any other solution?

slapi

8

Narrow percentage columns seldom work as they get too small very quickly and if you are finding that you need a min-width on them then you may as well go with a fixed width to start with.

To do what you want you would need to create a dummy floated left column that is floated at 30% width and with a min-width to match the fixed column. Then you just set the main column to overflow;hidden and it will stay clear. You will also need a min-width on the main-column to stop content from being hidden.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin:0;
	padding:0;
	height:100%
}
#fixed {
	position:fixed;
	left:0;
	top:0;
	bottom:0;
	overflow:auto;
	width:30%;
	min-width:250px;
	border-right:10px solid #000;
}
.sidebar {/* dummy column holds no content*/
	float:left;
	width:30%;
	border-right:15px solid transparent;
	min-width:250px;
	height:100px
}
.main {
	overflow:hidden;
	zoom:1.0;
	min-width:650px
}
</style>
</head>

<body>
<div id="fixed">
		<p>Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column Fixed positioned column </p>
</div>
<div class="sidebar"></div><!-- dummy column to preserve space -->
<div class="main">
		<p>lorem ipsum text lorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum textlorem ipsum text</p>
</div>
</body>
</html>