Getting fixed left element and fluid right element

Question

I think it's Friday so I'm having a brain fart. I can't for the life of me setup a page with a fixed left element <aside> about 200px and a fluid width right element <article> that takes up the remaining space.

Simple but I'm having issues with block, inline issues.

A push in the right direction would be great!

http://jsfiddle.net/pcEbG/

<style>
aside {
    width: 200px;
}

aside, article {
    display: inline-block;
}
</style>


<section>
    <aside>
    This is a section
    </aside>


    <article>
    This is an article that should take up the remaininfg width
    </article>

</section>

Possible duplicate: http://stackoverflow.com/questions/10698900/css-two-column-full-width — Gray Spectrum, Jun 20 '14 at 17:22

score 0 · Answer 1 · answered Jun 20 '14 at 17:33

I don't know what your browser requirements are, but if you know that the aside is a fixed width, for the width of the fluid container you can always use:

width: calc(100% - 200px);

Here is the browser compatibility for calc http://caniuse.com/#search=calc

Getting fixed left element and fluid right element

1 Answers1