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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook 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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.