Tableless layout similar to MSDN Library?

**megamanXplosion** · Aug 20, 2004, 20:10

http://msdn.microsoft.com/library/

I was wondering if anyone knows how I can achieve a similar layout. I need to have 2 columns expand to the bottom of the viewport and use scrollbars to scroll content. I do not want to use tables or frames, it needs to be an accessible layout. Could someone point me to an example somewhere, or create a layout for me? I cannot figure this out...

**Paul O'B** · Aug 21, 2004, 04:55

Hi,

I'm not sure if you mean something like this as its quite simple and I'm sure you could have done this yourself

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* commented backslash hack v2 \*/ 
html, body{height:100%;overflow:hidden;} 
/* end hack */ 
body {
padding:0;
margin:0;
color: #000;
overflow:hidden;
}
#outer{
height:100%;
background:#F8E7EC;
border-left:1px solid #000;
color: #000000;
margin-left:200px;
overflow:auto;
}
#left {
position:absolute;
left:0;
top:0;
height:100%;
width:200px;
overflow:auto;
background:#ffffcc;
}
 
</style>
</head>
<body>
<div id="left"> 
<p>This is the left content : This is the left content: This is the left content 
	: This is the left content:This is the left content : This is the left content: 
</p>
<p>This is the left content : This is the left content: This is the left content 
	: This is the left content:This is the left content : This is the left content: 
</p>
<p>This is the left content : This is the left content: This is the left content 
	: This is the left content:This is the left content : This is the left content: 
</p>
<p>This is the left content : This is the left content: This is the left content 
	: This is the left content:This is the left content : This is the left content: 
</p>
<p>This is the left content : This is the left content: This is the left content 
	: This is the left content:This is the left content : This is the left content: 
</p>
<p>This is the left content : This is the left content: This is the left content 
	: This is the left content:This is the left content : This is the left content: 
</p>
<p>This is the left content : This is the left content: This is the left content 
	: This is the left content:This is the left content : This is the left content: 
</p>
<p>This is the left content : This is the left content: This is the left content 
	: This is the left content:This is the left content : This is the left content: 
</p>
 
</div>
<div id="outer"> 
<p>This is the centre content : This is the centre content : This is the centre 
	content : This is the centre content : This is the centre content : This is 
	the centre content : This is the centre content : This is the centre content 
	: This is the centre content : </p>
</div>
</body>
</html>

Paul

**megamanXplosion** · Aug 21, 2004, 05:42

No, it's not quite that simple. I need to have a header bar too, which is 71px tall, and that is the part that's giving me problems with this layout. If it were just two simple columns and scrollable area then I wouldn't have any trouble at all. I'll give you a brief summary of what the overall layout will be like...

There is the top header bar which is 71px tall. Underneath the header bar there is 2 columns and both are scrollable areas. The left bar will contain a folding tree menu script which will have the latest messages from team members, latests tasks, reminders for today's date, etc. All of that will be synchronized every 5 minutes by using JavaScript to download an XML file to the page to avoid unnecessary refreshing. On the right side there will be the content for the current page that you're looking at, like the administrator's control panel pages, team members task editor, whatever.

I hope that gives you a clear idea on what I'm wanting to accomplish in the end. I can figure out how to stream data to the page and all that, I just cannot figure out how to get the 2-column layout with the header on it, it's giving me headaches.

*Wishes XHTML2 and CSS3 were available for use*

Edit: Also, if you can avoid using hacks then please do.

**Paul O'B** · Aug 21, 2004, 06:41

Hi,

Hmmm I can do this in ie without hacks and I can do it in moz/opera7 without hacks but they both need different code.

I don't know if this will be any good to you but it does what you've asked for however moz and ie need separate code to do it.

IE also needs quirks mode which is no problem using the xml prologue.

Anyway here it is - maybe you can refine it

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- force quirks mode in ie with xml prologue -->
<style type="text/css">
body {height:100%}
body {
 padding:0;
 margin:70px 0 0 0;
 color: #000000;
 overflow:hidden;
}
#outer{
 height:100%;
 background:#F8E7EC;
 color: #000000;
 margin-left:200px;
 overflow:auto;
}
html>body #outer {
 position:absolute;
 top:72px;left:200px;
 bottom:0px;right:0px;
 margin-left:0;
 height:auto;
}
* html #left  {
 position:absolute;
 left:0px;
 top:72px;
 height:100%;
 width:200px;
 overflow:hidden;
 background:#ffffcc;
 padding-bottom:72px;
}
* html #leftinner {
 position:relative;
 height:100%;
 overflow:auto;
}
html>body #left { 
 left:0px;
 top:72px;
 width:200px;
 overflow:auto;
 background:#ffffcc;
 position:absolute;
 bottom:0;right:200px;
 height:auto;
}
#header{
 height:71px;
 overflow:auto;
 position:absolute;
 left:0;
 top:0;
 background:red;
 border-bottom:1px solid #000;
 width:100%;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="left"> 
  <div id="leftinner">
  <p>This is the left content : This is the left content: This is the left content 
	: This is the left content:This is the left content : This is the left content: 
  </p>
</div></div>
<div id="outer"> 
  <p>This is the centre content : This is the centre content : This is the centre 
	content : This is the centre content : This is the centre content : This is 
	the centre content : This is the centre content : This is the centre content 
	: This is the centre content : </p>
</div>
</body>
</html>

Paul

**megamanXplosion** · Aug 21, 2004, 08:01

When I was referring to hacks, I wasn't necessarily referring to the browser-selectors (using w>w to avoid IE), but rather the cryptic things like the "commented backslash hack". As long as it makes sense (doesn't use cryptic ways of tripping up rendering engines) and validates, then it'll work

Thanks for the help Paul, I really appreciate it, that will work great.

The SitePoint Forums have moved.

User Tag List

Thread: Tableless layout similar to MSDN Library?

Thread Tools

Display

Tableless layout similar to MSDN Library?

Bookmarks

Bookmarks

Posting Permissions