SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Tricky Layout

  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)

    Tricky Layout

    Ok, here's the challenge:

    Left and right columns need to remain at 200px wide.
    Bottom left cell needs to remain at 200px high.
    Total layout should match the windows available space - complete layout will be within another table cell.
    All cells should have scroll bars when the content exceeds it's dimensions..





    Here's a start i've made:
    If it can work without the table then so be it - but i'm not too phased about it being within a table at this point.
    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">
    * {
    	margin: 0;
    	padding: 0;
    }
    html, body {
    	height: 100&#37;
    }
    .grid {
    	border-collapse: collapse;
    	border: 1px solid #aaa;
    	width: 100%;
    	height: 100%;
    }
    .grid td {
    	border: 1px solid #aaa;
    	overflow: auto;
    	height: 100%;
    	margin: 0;
    	padding: 0;
    }
    .grid .inner {
    	height:100%;
    	background: #F2F2F3;
    }
    .grid .workspaces {
    	height: 200px;
    }
    .grid .workspaces .inner {
    	background: #fff;
    }
    </style>
    </head>
    <body>
    <table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
      <tr>
        <td colspan="2" style="background:#FC6"><p style="height:100px;">Header</p></td>
      </tr>
      <tr>
        <td style="height:100%; vertical-align:top;"><table class="grid">
            <tr>
              <td style="width:200px" class="criteria"><div class="inner">
                  <p>asdf</p>
                  <p>asdf</p>
                  <p>asdf</p>
                  <p>df</p>
                  <p>asdf</p>
                  <p>sadf</p>
                  <p>asdf</p>
                  <p>sdf</p>
                  <p>asdf</p>
                </div></td>
              <td rowspan="2" class="workspace"><div class="inner"></div></td>
              <td style="width:200px" rowspan="2"><div class="inner"></div></td>
            </tr>
            <tr>
              <td class="workspaces"><div class="inner"> </div></td>
            </tr>
          </table></td>
        <td style="width: 200px; background:#FCC"><p style="height: 600px">Sidebar</p></td>
      </tr>
    </table>
    </body>
    </html>
    Don't worry too much about the outer table, it's just to show that there is more to this layout than whats in the pictures - the center part is 'the tricky part'
    table.grid should match the available space in the window, not match the height of the sidebar.
    At smaller height windows I am wanting table.grid to be completely visible.

    The first to get it out wins a coke.. if they accept it though the post.

  2. #2
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That looks far too easy. But I'm guessing I'm missing something here.

    I thought the same of one of Paul O'Briens tests a while ago and after about two hours of pounding away at it I gave up! I don't have time right now to have a crack unfortunately but count me in for next time

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    That looks far too easy..
    Perhaps, but I really have done much with 100&#37; height layouts and they scare me a little

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I had a go at it lazily using lots of absolute positioning.
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <title>T</title>
    <style type="text/css">
    body, html, div {padding:0;margin:0}
    div {border:1px solid red}
    #left, #right, #left div {
      width:200px;
      position:absolute;
      top:0;
      bottom:0;
    }
    #left .upper {
      left:0;
      top:0;
      bottom:200px;
      overflow:scroll;
    }
    #right {
      right:0;
    }
    #left .lower {
      left:-1px;
      position:absolute;
      height:200px;
      top:auto;
    }
    </style>
    </head>
    <body>
    <div id="main">
    <div id="left">
    <div class="upper">
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      </div>
      <div class="lower">
      </div>
    </div>
    <div id="right">
    </div>
    </div>
    </body>
    </html>

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes, I thought along the same lines but I knew IE6 wouldn't work so I added a cheat

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    *{margin:0;padding:0}
    html,body{height:100&#37;;}
    
    #outer{
        height:100%;
        position:relative;
    }
    #left,#right,#middle{
        position:absolute;
        overflow:auto;
        top:0;
    }
    #left{
        left:0;
        width:200px;
        bottom:200px;
        background:red
    }
    * html #left{
        height:expression(
    (d = document.compatMode == "CSS1Compat" ? document.documentElement : document.body) &&
    (d.clientHeight - 200 +"px" ));
    }
    #right{
        right:0;
        bottom:0;
        height:100%;
        width:200px;    
        background:blue;    
    }
    #middle{
        left:205px;
        right:205px;
        bottom:0;
        height:100%;    
        background:green;    
    }
    #inner{height:100%}
    #base{
        position:absolute;
        left:0;
        bottom:0;
        height:200px;
        width:200px;
        background:yellow;
        overflow:auto;
    }
    
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="left">
            <p>Left content goes here : Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here : </p>
        </div>
        <div id="middle">
            <div id="inner">
                <p>This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : </p>
            </div>
        </div>
        <div id="right">
            <p>Right content goes here : Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here : </p>
        </div>
        <div id="base">
            <p>This is the base content: </p>
        </div>
    </div>
    </body>
    </html>

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    You both deserve a coke in your own right, very very decent.

    Paul, with your IE cheat - because it matches the windows height - 200px it won't work unless the layout is the entire window. I'm really needing this layout to occupy just a portion of the window..

    Code:
    <div style="height: 300px; width: 500px; position: relative;"> Could you make it work in here in IE6< ? </div>
    I haven't used IE's crazy expressions before.. It looks like javascript, could I use d.getElementById().style.height on the parent? I'll check..

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Mark,

    style="height: 300px; width: 500px; position: relative;
    If you are using it in a fixed height element then you can just specify the exact height that you need without using an expression. It's only in a fluid width that you need to calculate the height.

    Expressions are just basically javascript for ie so you can find the elements height instead of the documents height.

    We might need to see a real example of what you are trying to do as I'm not sure whether any of the above will be workable in a real situation unless its explicitly controlled

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I should be able to get it working now with that info.
    I'll post an example of the whole page so I can get your thoughts on it.

    All the best,


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
  •