Tricky Layout

**markbrown4** · Jan 23, 2008, 23:07

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.

**ryanhellyer** · Jan 24, 2008, 02:21

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

**markbrown4** · Jan 24, 2008, 15:18

That looks far too easy..

Perhaps, but I really have done much with 100% height layouts and they scare me a little

**Raffles** · Jan 24, 2008, 15:37

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>

**Paul O'B** · Jan 24, 2008, 16:57

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>

**markbrown4** · Jan 24, 2008, 21:31

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

**Paul O'B** · Jan 25, 2008, 03:36

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

**markbrown4** · Jan 25, 2008, 15:06

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,

The SitePoint Forums have moved.

User Tag List

Thread: Tricky Layout

Thread Tools

Display

Tricky Layout

Bookmarks

Bookmarks

Posting Permissions