Two Column Layout with One Having a Fixed Width in CSS

Two floated columns - one fixed, one loose width

Have a look at this.
There aren't any demos, but I've used tutorials from this guy before so I assume it works fine. I gather from the article that the main content is liquid. The side content may also be liquid, but I think you can just give it a fixed width and leave it at that. The trick here is to place the main content first.

CSS - 2 Columns, One Fixed width, One Responsive

I would use flexbox to solve this.

Below the menu is at the left side when the width of the screen is more than 991 pixels. Otherwise it is below the article.

I have assigned colors for visibility only.

.content {  display: flex;  background: blue;}
.menu {  width: 100px;  background: red;}
.information {  background: green;  flex-grow: 1;}
@media all and (max-width: 991px) {  .content {    flex-wrap: wrap;  }  .menu {    order: 2;  }  .information {    order: 1;    min-width: 100%;  }}

<div class="content">  <nav class="menu">    Menu  </nav>  <article class="information">    Article Information  </article></div>

Display two columns with CSS, one with fixed width and another to take the rest of space

It's relatively easy - http://jsfiddle.net/bWuQB/5/

#idOuter {
    width: 100%;
    overflow: hidden;
    position: relative;
}

#idLeft {
    height: 100%;
    width: 100px;
    background: orange;
    position: absolute;
}

#idRight {
    margin-left: 100px;
    height: 100%;
    background: beige;
}

And you have to forget about using tables for layouts and anything, but tabular data. When you get used to table-less layouts you'll like them. And semantically it's the correct solution.

EDIT: Removed unnecessary float statement and updated Fiddle

In two-column layout, make one column have fixed width and the other take remaining space

You can use flexbox:

#container {    display: flex;               /* establish flex container */}
#left {    flex: 1;                     /* consume all available space */    background-color: #ff0000;}
#right {    flex: 0 0 180px;             /* don't grow, don't shrink, fixed at 180px width */    background-color: #00FF00;}

<div id="container">  <div id="left">left</div>  <div id="right">right</div></div>

Two column layout, fixed right column

Not a very elegant solution, but its working. They key is to wrap the contents of the left column and add a margin-right equal to the width of the right column / sidebar. On the right column, set the width and a negative margin-left equal to its width.

.left {
    float:left;
    width:100%;
    background-color: green;
}
.left-content {
    margin-right:120px;
}
.right {
    float:right;
    width: 120px;
    margin-left: -120px;
    background-color: red;
}

Here's a working fiddle
http://jsfiddle.net/heyapo/9Z363/

How can I have two fixed width columns with one flexible column in the center?

Instead of using width (which is a suggestion when using flexbox), you could use flex: 0 0 230px; which means:

0 = don't grow (shorthand for flex-grow)
0 = don't shrink (shorthand for flex-shrink)
230px = start at 230px (shorthand for flex-basis)

which means: always be 230px.

See fiddle, thanks @TylerH

Oh, and you don't need the justify-content and align-items here.

img {
    max-width: 100%;
}
#container {
    display: flex;
    x-justify-content: space-around;
    x-align-items: stretch;
    max-width: 1200px;
}
.column.left {
    width: 230px;
    flex: 0 0 230px;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
}
.column.center {
    border-left: 1px solid #eee;
}

2 column div layout: right column with fixed width, left fluid

Remove the float on the left column.

At the HTML code, the right column needs to come before the left one.

If the right has a float (and a width), and if the left column doesn't have a width and no float, it will be flexible :)

Also apply an overflow: hidden and some height (can be auto) to the outer div, so that it surrounds both inner divs.

Finally, at the left column, add a width: auto and overflow: hidden, this makes the left column independent from the right one (for example, if you resized the browser window, and the right column touched the left one, without these properties, the left column would run arround the right one, with this properties it remains in its space).

Example HTML:

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible width
    </div>
</div>

CSS:

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}

Example here: http://jsfiddle.net/jackJoe/fxWg7/

CSS Flex: Two columns with fixed width and remaining two columns with relative wdith

This will help you.

.col3, .col4 {
    min-width: 200px;
}

this is a revision ( and rule max-width has no auto parameter ):

.col1,
.col2 {
  width: 50%;
  max-width: 0;
}

.col3,
.col4 {
  min-width: 120px;
  max-width: 200px;
}