Responsive columns with fixed width and percent width

I have two columns on a page.

One is fixed width 100px, the other has to scale to fit to the right of it using the remaining space. Is there any way to do this? I can't seem to come up with a solution that works. So I just want the second column to be the full width of the page less 100px.

<div style="width:100px; float: left;">Column 1</div>
<div style="???">Column 2</div>
intoxicated_curveballAsked:
Who is Participating?
 
Tom BeckCommented:
Better to use something like this:

http://jsfiddle.net/tommyBoy/tnt47uku/

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

Open in new window

    #left {
            float:left;
            width:100px;
            background-color:#ff0000;
        }
        #right {
            width: 100%;
            background-color:#00FF00;
        }

Open in new window

0
 
intoxicated_curveballAuthor Commented:
Found the solution immediately after posting :)

CSS for second column:

width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: -o-calc(100% - 100px);
width: calc(100% - 100px);
0
 
Tom BeckCommented:
Browser support for calc is a little weak especially in IE older than version 11.

http://caniuse.com/#feat=calc
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I would suggest reconsidering and go with what Tom is suggesting as it will be more widely accepted.
0
 
intoxicated_curveballAuthor Commented:
You're right. Tom's solution is better. Didn't even think of that.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Should we open up the question and assign him the solution?
0
 
intoxicated_curveballAuthor Commented:
I found it after.
0
 
Tom BeckCommented:
Thanks...both!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.