SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strange layout...is it possible at all?

    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. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,883
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    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:centerbackground-color:#ff9; color:#333}
     #left {width:29%; position:fixed; top:5.5em; left:0px; height:4.2em; 
              
    text-align:centerbackground-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=''>link1<a><br />
           <
    a href='#'>link2<a><br />
           <
    a href='#'>link3<a><br />
           <
    a href='#'>link4<a><br />
           <
    a href='#'>link5<a><br />
           <
    a href='#'>link6<a><br />
           <
    a href='#'>link7<a><br />
           <
    a href='#'>link8<a><br />
           <
    a href='#'>link9<a><br />
           <
    a href='#'>link10<a><br />
           <
    a href='#'>link11<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
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:centerbackground-color:#ff9; color:#333}
     #left {width:29%; position:fixed; top:5.5em; left:0px; height:100%;
              
    text-align:centerbackground-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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.)

  5. #5
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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. #7
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by slapuccino View Post
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •