Strange layout...is it possible at all?

**slapuccino** · Jan 27, 2012 11:06

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

**John_Betong** · Jan 27, 2012 11:45

Just knocked this up and it should be a start

PHP 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: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>

**slapuccino** · Jan 27, 2012 13:17

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

PHP 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>

**Paul O'B** · Jan 29, 2012 16:27

HI,

Just lose the 100% height and use bottom instead.

Code:

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

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

**slapuccino** · Jan 30, 2012 04:05

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

**Paul O'B** · Jan 30, 2012 04:10

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.

**slapuccino** · Jan 30, 2012 04:17

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

**Paul O'B** · Jan 30, 2012 06:35

Originally Posted by slapuccino

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

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.

Code:

<!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>

User Tag List

Thread: Strange layout...is it possible at all?

Thread Tools

Display

Strange layout...is it possible at all?

Bookmarks

Bookmarks

Posting Permissions