CSS Layout liquid column issue wrapping content

Question

+-----------------------------------------------------+
|.....................................................|
|..header height: 128px...............................|
|.....................................................|
+-----------------------------------------------------+
|.............|.......................................|
|.sidebar.....|..Lorem ipsum..........................|
|.width:......|.......................................|
|.140px.......|..+---------------------------------------------+
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|.............|..+---------------------------------------------+
|.............|.......................................|
|.............|.......................................|
|.............|.......................................|
|.............|..frame should be as large as the......|
|.............|..entire viewport or larger depending..|
|.............|..on the context.......................|
+-----------------------------------------------------+

I am trying to create a 2 column layout (sidebar + content area) with a header (and possibly a footer) where the sidebar has a fixed width and the content area is fluid. The difficulty is having the content area effectively wrap its contents so the content doesn't overflow.

I'd like to know if there is a CSS way to do this and if not whats the best Javascript approach to it since I had some difficulties with cross-browser support.

Answer 1

Try this.

#content {
  margin-top: 128px;
  maring-left: 140px;
}
#sidebar {
  position: fixed;
  left: 0;
  top: 128px;
  width: 140px;
}

Answer 2

CSS:

#element { word-wrap: break-word; }

Answer 3

This will do it for you:

HTML

<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>

CSS

#header {
   height: 128px;
}

#sidebar {
   float: left;
   width: 140px;
}

#content {
   margin-left: 140px;
}

You can see an example here.

Answer 4

After having researched the matter substantially, I've concluded that it simply can't be done with css in a compatible way (and I'm not even considering IE6). The possible solutions involve either javascript or tables. I picked the lesser evil (tables) since javascript resulted in a more complicated solution and handling the onResize event can be taxing on the browser depending on the complexity of the function called. Certain search engine concerns are not important given it's an intranet application. The only real issue is accessibility.

I'd be quite glad to be proven wrong though :)