css/3 column tricky problem

[glennn.php]

i'm having trouble with this "3 column" layout:

i need to have a fixed width center col., with the left and right cols flex --- the problem i'm having is keeping the LEFT column floated right so as to maintain the same distance between the right edge of the left column with the left edge of the center (fixed at 770) column regardless of browser res... (please see layout i'm describing in attachment - not sure if my words are clear enough...)

could someone please show me what i'm doing wrong? i'll include the code i've played with below...

(i REALLY appreciate it!!)

<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-color: #FFFFFF;
}
.thrColLiq #container {
	width: 100%;  /* this will create a container 80% of the browser width */
	background: #FFFFFF; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	margin-top: 0;
	margin-bottom: 0;
}
/* Tips for sidebars:
1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width. 
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColLiq #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
*/
.thrColLiq #sidebar1 {
	float: none; /* this element must precede in the source order any element you would like it be positioned next to */
	width: 13%; /* top and bottom padding create visual space within this div  */
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 0;
	margin-left: auto;
}
.thrColLiq #sidebar2 {
	float: right; /* this element must precede in the source order any element you would like it be positioned next to */
	width: 10%; /* top and bottom padding create visual space within this div  */
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 0;
}
.thrColLiq #sidebar1 p, .thrColLiq #sidebar1 h3, .thrColLiq #sidebar2 p, .thrColLiq #sidebar2 h3 {
  margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
  margin-right: 10px;
}
/* Tips for mainContent:
1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
.thrColLiq #mainContent {
	width:770px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	border: 1px dashed #000000;
	margin-right: 0px;
}
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
  float: right;
  margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
  float: left;
  margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
  clear: both;
  height: 0;
  font-size: 1px;
  line-height: 0px;
}
-->
</style>
<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.thrColLiq #sidebar2, .thrColLiq #sidebar1 { padding-top: 30px; }
.thrColLiq #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>

<body class="thrColLiq">

////////////////////////////////////////////////
  <div id="container">
    <div style="width:75%"> 
      <div id="sidebar" style="float:left; width:25%; height:150px; text-align:right;">Left</div>
      <div id="main" style="float:right; width:770px; border:1px solid #000;">
        <h1> Main Content<br />  
          <br />  
          <br />  
          <br />
      </h1>
      <p>&nbsp;</p>
      <!-- end #mainContent -->
        </div>
    </div>
	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
    <br class="clearfloat" />
<!-- end #container --></div>
</body>
</html>

(I'm using the inline code in experimentation - i realize it's a bit sloppy at the moment.)

thanks for anyone's help ...

Regards,
GN

[markbrown4]

Hi,

Firstly, i'm not sure why anyone would want to create that layout apart from an experiment but.. here's what I came up with:

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* { margin: 0; padding: 0 }
#center {
	width: 770px;
	margin: 0 auto;
	border: 1px solid #000;
	position: relative;
	background: #FC3;
}
.inner {
	overflow: auto;
}
#left {
	float: left;
	width: 100&#37;;
	margin-right: -100%;
}
#left .inner {
	margin-right: 772px;
}
#right {
	float: right;
	width: 100%;
	margin-left: -100%;
}
#right .inner {
	margin-left: 772px
}
#left .inner .inner { padding-right: 50% }
#right .inner .inner { padding-left: 50%; }
#left .inner .content {
 background: #CC0
}
#right .inner .content {
	background: #CC0;
}
#footer { clear: both; background:#C30 }
</style>
</head>
<body>
<div id="left">
  <div class="inner">
    <div class="content"><p>Praesent condimentum enim ullamcorper mi. Praesent sagittis odio non odio. In sed elit at turpis tempor dictum. Aenean eleifend nisl. Aliquam erat volutpat. Sed ante turpis, viverra sit amet, semper ut, vehicula et, lectus. In hac habitasse platea dictumst. Nam mattis. Ut condimentum orci. Donec sit amet sem. Aenean eu lectus. Nullam augue. Quisque viverra nulla eleifend sapien. Fusce tortor leo, commodo at, facilisis et, vestibulum eget, mi. Curabitur dapibus venenatis odio. Fusce non risus eget lacus nonummy venenatis. Sed dapibus volutpat velit.</p></div>
  </div>
</div>
<div id="right">
  <div class="inner">
    <div class="content">Quisque quam lectus, sagittis in, accumsan nec, porta vitae, augue. Proin justo nibh, porttitor nec, vehicula eget, rhoncus pellentesque, dui. Quisque ultrices malesuada dolor. In eu dui sit amet nibh vehicula gravida. Donec quam arcu, faucibus eget, eleifend eget, scelerisque eu, nulla. Curabitur faucibus facilisis augue. Nullam volutpat odio sit amet sapien. Sed venenatis fringilla orci. Nulla facilisi. In pharetra nunc vel nibh. Nam a lectus. Nam tincidunt, tellus in sollicitudin malesuada, libero lectus gravida tellus, eu tristique metus turpis in sapien. Proin in magna a mi condimentum tincidunt. Cras velit. Vivamus arcu mi, varius ut, vehicula quis, luctus at, pede. Aenean vulputate, quam sit amet ultrices dictum, nunc metus suscipit augue, sagittis condimentum lacus elit in tellus. Duis iaculis, tellus eget suscipit egestas, urna tortor tincidunt erat, at commodo sem mi in urna. Etiam eleifend, magna vel suscipit facilisis, ipsum dolor consequat purus, id venenatis dolor massa id arcu.</div>
  </div>
</div>
<div id="center">
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sit  amet elit vel pede rhoncus dictum. Sed dictum aliquet enim. In faucibus  dui ut lorem. Integer non lorem. Nullam euismod, augue ac tempor  interdum, ipsum nulla tempus tortor, vitae rutrum felis orci ut lorem.  Nulla interdum, mauris et cursus vehicula, lacus arcu auctor neque, a  nonummy nisl urna in sapien. Sed elit. Mauris consequat, sapien id  faucibus ultrices, pede tortor cursus nisi, eleifend ultricies enim  velit id orci. In gravida porttitor elit. Fusce gravida arcu ac nisl.  Morbi aliquam sollicitudin nisl. </p>
  <p>Phasellus accumsan molestie mauris. Nulla sollicitudin tempor risus.  Fusce non quam vel pede pretium gravida. Nam eu neque et diam porttitor  varius. Praesent id nibh. Etiam magna quam, placerat a, ullamcorper  vel, tincidunt eu, mauris. Ut laoreet. Quisque at mi sit amet purus  bibendum vulputate. Vestibulum sapien dui, mollis et, vestibulum nec,  consequat sit amet, arcu. Morbi fringilla. Aliquam at dui ut dui  adipiscing pulvinar. Vestibulum est mi, volutpat vel, dignissim non,  vehicula eget, massa. Integer quis erat a urna aliquam elementum. In  posuere porta massa. Phasellus dapibus erat vel augue. In sagittis  semper dolor. Fusce ac justo. Ut a tortor non massa lobortis mollis.  Donec eget massa eu leo mattis rhoncus. Morbi pulvinar. </p>
  <p>Pellentesque gravida. Mauris tristique erat sit amet lorem. Aliquam  ac libero ac erat dignissim fringilla. Suspendisse dapibus. Nunc congue  orci a ligula. Mauris hendrerit dictum eros. Nam urna felis, egestas  eget, dictum et, ullamcorper vitae, ipsum. Suspendisse potenti.  Vestibulum lectus ligula, faucibus ut, accumsan non, vehicula in,  ipsum. Suspendisse potenti. </p>
</div>
<div id="footer">footer</div>
</body>
</html>

IE will not clear the sidebars but apart from that it seems the same in the browsers i've tested in,

Hope it helps

Edit: Actually the above needs some work done..

[SRD]

I've been playing around with this idea:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page title</title>
<link type="text/css" href="glenn.css" rel="stylesheet" />

</head>

<body>
<div id="container">
	<div id="outer">
                 <div class="leftcol">Hi</div>
                 <div class="rightcol">Hi</div>
	</div>
  <div class="centrecol">Hi</div>
</div>

</body>
</html>

and a stlyesheet like this:

*
{
margin: 0;
padding: 0;
}
body
{
text-align: center;
}
#container
{
width: 100%;
margin: auto;
}
#outer
{
width: 100%;
margin: auto;
}
.leftcol
{
float: left;
background: red;
margin-right: 390px;
}
.rightcol
{
float: left;
background: blue;
margin-left: 390px;
}

.centrecol
{
width: 770px;
margin: auto;
background: yellow;
}

With the idea of pushing the centrecol up between the two outside cols, but my <outer> div won't centralise.

[markbrown4]

I had a look at your screenshot this time

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* { margin: 0; padding: 0 }
p { margin-bottom: 1em }
#center {
	width: 730px;
padding: 20px;
	margin: 0 auto;
	border: 1px solid #000;
	position: relative;
	background: #FC3;
}
#left {
	float: left;
	width: 100&#37;;
	margin-right: -100%;
}
#left .inner {
	margin-right: 771px;
}
#left .inner .content {
	margin-right: 50%;
	background:#FF9;
	padding: 20px;
	border: 1px solid #000;
}
</style>
</head>
<body>
<div id="left">
  <div class="inner">
    <div class="content"><p>Praesent condimentum enim ullamcorper mi. Praesent sagittis odio non odio. In sed elit at turpis tempor dictum. Aenean eleifend nisl. Aliquam erat volutpat. Sed ante turpis, viverra sit amet, semper ut, vehicula et, lectus. In hac habitasse platea dictumst. Nam mattis. Ut condimentum orci. Donec sit amet sem. Aenean eu lectus. Nullam augue. Quisque viverra nulla eleifend sapien. Fusce tortor leo, commodo at, facilisis et, vestibulum eget, mi. Curabitur dapibus venenatis odio. Fusce non risus eget lacus nonummy venenatis. Sed dapibus volutpat velit.</p></div>
  </div>
</div>
<div id="center">
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sit  amet elit vel pede rhoncus dictum. Sed dictum aliquet enim. In faucibus  dui ut lorem. Integer non lorem. Nullam euismod, augue ac tempor  interdum, ipsum nulla tempus tortor, vitae rutrum felis orci ut lorem.  Nulla interdum, mauris et cursus vehicula, lacus arcu auctor neque, a  nonummy nisl urna in sapien. Sed elit. Mauris consequat, sapien id  faucibus ultrices, pede tortor cursus nisi, eleifend ultricies enim  velit id orci. In gravida porttitor elit. Fusce gravida arcu ac nisl.  Morbi aliquam sollicitudin nisl. </p>
  <p>Phasellus accumsan molestie mauris. Nulla sollicitudin tempor risus.  Fusce non quam vel pede pretium gravida. Nam eu neque et diam porttitor  varius. Praesent id nibh. Etiam magna quam, placerat a, ullamcorper  vel, tincidunt eu, mauris. Ut laoreet. Quisque at mi sit amet purus  bibendum vulputate. Vestibulum sapien dui, mollis et, vestibulum nec,  consequat sit amet, arcu. Morbi fringilla. Aliquam at dui ut dui  adipiscing pulvinar. Vestibulum est mi, volutpat vel, dignissim non,  vehicula eget, massa. Integer quis erat a urna aliquam elementum. In  posuere porta massa. Phasellus dapibus erat vel augue. In sagittis  semper dolor. Fusce ac justo. Ut a tortor non massa lobortis mollis.  Donec eget massa eu leo mattis rhoncus. Morbi pulvinar. </p>
  <p>Pellentesque gravida. Mauris tristique erat sit amet lorem. Aliquam  ac libero ac erat dignissim fringilla. Suspendisse dapibus. Nunc congue  orci a ligula. Mauris hendrerit dictum eros. Nam urna felis, egestas  eget, dictum et, ullamcorper vitae, ipsum. Suspendisse potenti.  Vestibulum lectus ligula, faucibus ut, accumsan non, vehicula in,  ipsum. Suspendisse potenti. </p>
</div>
</body>
</html>

Don't have a clue about IE..

Edit:
Forcing haslayout on #left .inner takes care of IE6

* html #left .inner { height: 1% }

Now it's just IE7 who's the odd man out..

Edit:
And HasLayout fixes IE7 as well.

#left .inner {
	margin-right: 771px;
	min-height: 1%;
}

I think i'm getting the hang of this CSS stuff now Paul

Complete 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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* { margin: 0; padding: 0 }
p { margin-bottom: 1em }
#center {
	width: 730px;
  padding: 20px;
	margin: 0 auto;
	border: 1px solid #000;
	background: #FC3;
}
#left {
	float: left;
	width: 100%;
	margin-right: -100%;
}
#left .inner {
	margin-right: 812px;
	min-height: 1%;
}
* html #left .inner { height: 1% }
#left .inner .content {
	margin-right: 50%;
	background:#FF9;
	padding: 20px;
	border: 1px solid #000;
}
</style>
</head>
<body>
<div id="left">
  <div class="inner">
    <div class="content"><p>Praesent condimentum enim ullamcorper mi. Praesent sagittis odio non odio. In sed elit at turpis tempor dictum. Aenean eleifend nisl. Aliquam erat volutpat. Sed ante turpis, viverra sit amet, semper ut, vehicula et, lectus. In hac habitasse platea dictumst. Nam mattis. Ut condimentum orci. Donec sit amet sem. Aenean eu lectus. Nullam augue. Quisque viverra nulla eleifend sapien. Fusce tortor leo, commodo at, facilisis et, vestibulum eget, mi. Curabitur dapibus venenatis odio. Fusce non risus eget lacus nonummy venenatis. Sed dapibus volutpat velit.</p></div>
  </div>
</div>
<div id="center">
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sit  amet elit vel pede rhoncus dictum. Sed dictum aliquet enim. In faucibus  dui ut lorem. Integer non lorem. Nullam euismod, augue ac tempor  interdum, ipsum nulla tempus tortor, vitae rutrum felis orci ut lorem.  Nulla interdum, mauris et cursus vehicula, lacus arcu auctor neque, a  nonummy nisl urna in sapien. Sed elit. Mauris consequat, sapien id  faucibus ultrices, pede tortor cursus nisi, eleifend ultricies enim  velit id orci. In gravida porttitor elit. Fusce gravida arcu ac nisl.  Morbi aliquam sollicitudin nisl. </p>
  <p>Phasellus accumsan molestie mauris. Nulla sollicitudin tempor risus.  Fusce non quam vel pede pretium gravida. Nam eu neque et diam porttitor  varius. Praesent id nibh. Etiam magna quam, placerat a, ullamcorper  vel, tincidunt eu, mauris. Ut laoreet. Quisque at mi sit amet purus  bibendum vulputate. Vestibulum sapien dui, mollis et, vestibulum nec,  consequat sit amet, arcu. Morbi fringilla. Aliquam at dui ut dui  adipiscing pulvinar. Vestibulum est mi, volutpat vel, dignissim non,  vehicula eget, massa. Integer quis erat a urna aliquam elementum. In  posuere porta massa. Phasellus dapibus erat vel augue. In sagittis  semper dolor. Fusce ac justo. Ut a tortor non massa lobortis mollis.  Donec eget massa eu leo mattis rhoncus. Morbi pulvinar. </p>
  <p>Pellentesque gravida. Mauris tristique erat sit amet lorem. Aliquam  ac libero ac erat dignissim fringilla. Suspendisse dapibus. Nunc congue  orci a ligula. Mauris hendrerit dictum eros. Nam urna felis, egestas  eget, dictum et, ullamcorper vitae, ipsum. Suspendisse potenti.  Vestibulum lectus ligula, faucibus ut, accumsan non, vehicula in,  ipsum. Suspendisse potenti. </p>
</div>
</body>
</html>

[Paul O'B]

I think i'm getting the hang of this CSS stuff now Paul

You certainly are.... that's good use of negative margins.

I have an old demo here that will do the same thing albeit slightly differently.

http://www.pmob.co.uk/temp/fixed-center-fluid-sides.htm

[glennn.php]

thanks to all of you - i wasn't notified of these posts - just came back to check and see your replies - will respond soon. thanks again...

GN

[glennn.php]

markbrown - freakin' beautiful. just what i wanted. thanks...

i'm not used to neg margins, i guess they're as good as the rest. i'll learn a lot from this, thanks again...

GN

I had a look at your screenshot this time

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* { margin: 0; padding: 0 }
p { margin-bottom: 1em }
#center {
	width: 730px;
padding: 20px;
	margin: 0 auto;
	border: 1px solid #000;
	position: relative;
	background: #FC3;
}
#left {
	float: left;
	width: 100%;
	margin-right: -100%;
}
#left .inner {
	margin-right: 771px;
}
#left .inner .content {
	margin-right: 50%;
	background:#FF9;
	padding: 20px;
	border: 1px solid #000;
}
</style>
</head>
<body>
<div id="left">
  <div class="inner">
    <div class="content"><p>Praesent condimentum enim ullamcorper mi. Praesent sagittis odio non odio. In sed elit at turpis tempor dictum. Aenean eleifend nisl. Aliquam erat volutpat. Sed ante turpis, viverra sit amet, semper ut, vehicula et, lectus. In hac habitasse platea dictumst. Nam mattis. Ut condimentum orci. Donec sit amet sem. Aenean eu lectus. Nullam augue. Quisque viverra nulla eleifend sapien. Fusce tortor leo, commodo at, facilisis et, vestibulum eget, mi. Curabitur dapibus venenatis odio. Fusce non risus eget lacus nonummy venenatis. Sed dapibus volutpat velit.</p></div>
  </div>
</div>
<div id="center">
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sit  amet elit vel pede rhoncus dictum. Sed dictum aliquet enim. In faucibus  dui ut lorem. Integer non lorem. Nullam euismod, augue ac tempor  interdum, ipsum nulla tempus tortor, vitae rutrum felis orci ut lorem.  Nulla interdum, mauris et cursus vehicula, lacus arcu auctor neque, a  nonummy nisl urna in sapien. Sed elit. Mauris consequat, sapien id  faucibus ultrices, pede tortor cursus nisi, eleifend ultricies enim  velit id orci. In gravida porttitor elit. Fusce gravida arcu ac nisl.  Morbi aliquam sollicitudin nisl. </p>
  <p>Phasellus accumsan molestie mauris. Nulla sollicitudin tempor risus.  Fusce non quam vel pede pretium gravida. Nam eu neque et diam porttitor  varius. Praesent id nibh. Etiam magna quam, placerat a, ullamcorper  vel, tincidunt eu, mauris. Ut laoreet. Quisque at mi sit amet purus  bibendum vulputate. Vestibulum sapien dui, mollis et, vestibulum nec,  consequat sit amet, arcu. Morbi fringilla. Aliquam at dui ut dui  adipiscing pulvinar. Vestibulum est mi, volutpat vel, dignissim non,  vehicula eget, massa. Integer quis erat a urna aliquam elementum. In  posuere porta massa. Phasellus dapibus erat vel augue. In sagittis  semper dolor. Fusce ac justo. Ut a tortor non massa lobortis mollis.  Donec eget massa eu leo mattis rhoncus. Morbi pulvinar. </p>
  <p>Pellentesque gravida. Mauris tristique erat sit amet lorem. Aliquam  ac libero ac erat dignissim fringilla. Suspendisse dapibus. Nunc congue  orci a ligula. Mauris hendrerit dictum eros. Nam urna felis, egestas  eget, dictum et, ullamcorper vitae, ipsum. Suspendisse potenti.  Vestibulum lectus ligula, faucibus ut, accumsan non, vehicula in,  ipsum. Suspendisse potenti. </p>
</div>
</body>
</html>

Don't have a clue about IE..

Edit:
Forcing haslayout on #left .inner takes care of IE6

* html #left .inner { height: 1% }

Now it's just IE7 who's the odd man out..

Edit:
And HasLayout fixes IE7 as well.

#left .inner {
	margin-right: 771px;
	min-height: 1%;
}

I think i'm getting the hang of this CSS stuff now Paul

Complete 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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* { margin: 0; padding: 0 }
p { margin-bottom: 1em }
#center {
	width: 730px;
  padding: 20px;
	margin: 0 auto;
	border: 1px solid #000;
	background: #FC3;
}
#left {
	float: left;
	width: 100%;
	margin-right: -100%;
}
#left .inner {
	margin-right: 812px;
	min-height: 1%;
}
* html #left .inner { height: 1% }
#left .inner .content {
	margin-right: 50%;
	background:#FF9;
	padding: 20px;
	border: 1px solid #000;
}
</style>
</head>
<body>
<div id="left">
  <div class="inner">
    <div class="content"><p>Praesent condimentum enim ullamcorper mi. Praesent sagittis odio non odio. In sed elit at turpis tempor dictum. Aenean eleifend nisl. Aliquam erat volutpat. Sed ante turpis, viverra sit amet, semper ut, vehicula et, lectus. In hac habitasse platea dictumst. Nam mattis. Ut condimentum orci. Donec sit amet sem. Aenean eu lectus. Nullam augue. Quisque viverra nulla eleifend sapien. Fusce tortor leo, commodo at, facilisis et, vestibulum eget, mi. Curabitur dapibus venenatis odio. Fusce non risus eget lacus nonummy venenatis. Sed dapibus volutpat velit.</p></div>
  </div>
</div>
<div id="center">
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sit  amet elit vel pede rhoncus dictum. Sed dictum aliquet enim. In faucibus  dui ut lorem. Integer non lorem. Nullam euismod, augue ac tempor  interdum, ipsum nulla tempus tortor, vitae rutrum felis orci ut lorem.  Nulla interdum, mauris et cursus vehicula, lacus arcu auctor neque, a  nonummy nisl urna in sapien. Sed elit. Mauris consequat, sapien id  faucibus ultrices, pede tortor cursus nisi, eleifend ultricies enim  velit id orci. In gravida porttitor elit. Fusce gravida arcu ac nisl.  Morbi aliquam sollicitudin nisl. </p>
  <p>Phasellus accumsan molestie mauris. Nulla sollicitudin tempor risus.  Fusce non quam vel pede pretium gravida. Nam eu neque et diam porttitor  varius. Praesent id nibh. Etiam magna quam, placerat a, ullamcorper  vel, tincidunt eu, mauris. Ut laoreet. Quisque at mi sit amet purus  bibendum vulputate. Vestibulum sapien dui, mollis et, vestibulum nec,  consequat sit amet, arcu. Morbi fringilla. Aliquam at dui ut dui  adipiscing pulvinar. Vestibulum est mi, volutpat vel, dignissim non,  vehicula eget, massa. Integer quis erat a urna aliquam elementum. In  posuere porta massa. Phasellus dapibus erat vel augue. In sagittis  semper dolor. Fusce ac justo. Ut a tortor non massa lobortis mollis.  Donec eget massa eu leo mattis rhoncus. Morbi pulvinar. </p>
  <p>Pellentesque gravida. Mauris tristique erat sit amet lorem. Aliquam  ac libero ac erat dignissim fringilla. Suspendisse dapibus. Nunc congue  orci a ligula. Mauris hendrerit dictum eros. Nam urna felis, egestas  eget, dictum et, ullamcorper vitae, ipsum. Suspendisse potenti.  Vestibulum lectus ligula, faucibus ut, accumsan non, vehicula in,  ipsum. Suspendisse potenti. </p>
</div>
</body>
</html>