How can I have a 2 column layout with one of the columns with a fixed width and the other with the remaining width?


Tags: html,css

Problem :

I have a 2 column layout. The left column has a width of 300px. I would like the right column to take up the full width of the remaining monitor space. But I just can't figure out how this mixture of px and % can be made to work? Anyone have any ideas?

I guess at worse I can use js to get the user's viewport width and add some inline styles dynamically but then I would have to perform that on every window resize, etc. So I would much rather have a pure css solution.



Solution :

I would prefer thirtydot's answer:

Demo fiddle.

Minimum CSS requirement:

#sideBar {
    width: 300px;
    float: left;
}
#mainContent {
    overflow: hidden;
}

    CSS Howto..

    Selected text showing oversized selection area

    How to create custom shapes with pseudo classes in CSS3

    How to Change Css coding with a link [closed]

    How to set CSS rules for input, except one type

    How to make DIVs flow to the left in a x-scrollable pane with CSS?

    How to make content of invisible except for the left column?

    How to spin css cube each after each [closed]

    How to implement conditional CSS in this situation?

    How can I style a list of name-value pairs to appear like an HTML table?

    How to resize animated gif with HTML/CSS?

    How to convert complex xpath to css

    How to set CSS attributes relative to a parent node?

    How do i center an HTML DIV with logo on the left?

    How to make a grid of interactive elements?

    How to stick to bottom on layout by using CSS?

    How to make css flex box row auto resizing horizontally with image

    Bootstrap table how hidden, when toggled visible using javascript it does not show correctly

    How to disable fixed header on Mobile with CSS

    how to CSS select all th cells, except the last one on IE7/8?

    how to indent HTML forms on modals [closed]

    How do I put 2 columns beside each other

    How to select 3rd div which has specific css class

    CSS: How to limit length of the border-bottom div?

    (html/css) How do I remove the margin appearing from my header, and have it only apply to my Logo?

    CSS: How to theme only submit button (and not cancel or back button) - I´m using Drupal 6

    Devtools audit shows unwanted/injected css rules

    how to do conditional css on table row?

    How is designing shape similar to waves with html and css?

    How to make div width almost 100%

    How do I make menu background even with the header in HTML/CSS