Question

I have been told several times that I shouldn’t be using tables for layout design but I constantly find myself going back to them when I can’t figure out how to do something.

I need to create a two column layout. The left column is 300px width and the right column takes up the rest of the width on the page. I can’t figure out how to properly do this with plain HTML and I can’t even quite figure out how to do it with a table either.

In order to have the right column take up the rest of the width it seems that I would need to specify the left column’s width with a percentage so that the right column’s width can be 100% less the percentage of the left column. But I need the left column to be 300px exactly.

The only thing I can think to do is calculate the right column’s width at runtime with JS. Any ideas how I can accomplish this without tables and/or without Javascript?

Answer 1

Until we have flexbox layout I would use absolute positioning:

Html:

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

CSS:

#container {
    position: relative;
    height: 150px;
}

#left, #right {
    position: absolute;
    top: 0px; 
    bottom: 0px;
}

#left {
    left: 0px; 
    width: 300px;
    background: red;
}

#right {
    left: 300px; 
    right: 0px;    
    background: green;
}

jsfiddle

There are alternatives if you want the layout to adapt to the content instead of the container. If your right column has more content you could use:

#container {
    position: relative;
}

#left {
    position: absolute;
    left: 0px; 
    width: 300px;
    top: 0px; bottom: 0px;
    background: red;
}

#right {
    margin-left : 300px; 
    background: green;
}

jsfiddle

If your left column has more content, use:

#container {
    position: relative;
}

#left {
    width: 300px;
    background: red;
}

#right {
    position: absolute;
    left: 300px; 
    right: 0px;
    top: 0px; bottom: 0px;
    background: green;
}

jsfiddle