Two Columns with Variable Width and a Fixed Gap Between Them

Two columns with variable width and a fixed gap between them

You'll need either tables or CSS tables.

CSS tables should be supported by all browsers except IE7 and below.

Two columns with variable width and a fixed gap between them

You'll need either tables or CSS tables.

CSS tables should be supported by all browsers except IE7 and below.

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.

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;
}

Dynamically adjusting two outside columns to the variable width of the center column

Good 'ole tables to the rescue:

http://jsfiddle.net/hgwdT/

Actually I think tables are the devil, but this works as you described. And so here it is using display: table-cell on the child divs, so it is functionally the same using nicer markup:

http://jsfiddle.net/XXXdB/

The center element can indeed have a dynamic width; to prevent the content from being squished, I simply added a white-space: nowrap to the p containing the text.

I also confirmed that this solution works in IE8 and FF, in addition to Chrome.

css layout fixed width and variable width on same line

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; border: 0 none; }
#left { margin-right: 300px; background: yellow; }
#right { width: 300px; float: right; background: #ccc; }
</style>
</head>
<body>
<div id="wrapper">
<div id="right">Fixed</div>
<div id="left">Variable</div>
</div>
</body>
</html>

This has a right column of 300 pixels and a variable left column. The DOCTYPE is just there to make IE misbehave less. Also use of a reset CSS is recommended.

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>

Fixed gap between CSS columns

The column gap is only changing sizes because you set a hard width on the columns. You can't have a fluid layout with all hard set widths, something has to be fluid.

Here is an example with fluid columns and consistent gaps.

p{
  column-width: 240px;
  column-gap: 2em;            
  padding: 5px; 
  text-align:justify;
}

Two Columns with Variable Width and a Fixed Gap Between Them

Two columns with variable width and a fixed gap between them

Two columns with variable width and a fixed gap between them

Two floated columns - one fixed, one loose width

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

Dynamically adjusting two outside columns to the variable width of the center column

css layout fixed width and variable width on same line

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

Fixed gap between CSS columns

Related Topics

Leave a reply