Question

I’m currently running in circles with my actually very basic CSS.
I am writing a front-end for a mail client and got a main (body) container containing the sidebar and the “innerContainer”, that should fill out the space that’s left after the sidebar.

Important HTML:

    <div id="outerContainer">
        <div id="sideBar">
        </div>
        <div id="innerContainer">
            <!-- not important ;D -->
        </div>
    </div>

Important CSS:

#sideBar {
    margin: 4px 2px 4px 4px;
    height: 644px;
    width: 14%;
    min-width: 220px;
    border-radius: 4px;
    background-color: #fff;
    float: left;
}

#innerContainer {
    margin: 4px 4px 4px 2px;
    height: 644px;
    border-radius: 4px;
    background-color: #fff;
    float: right;
}

I am currently trying to let the client determine the perfect width by not using any width-property in the rules for #innerContainer. Using that, it’s just 0px, even though the margin should leave a 4px space between both elements.
Using a fixed width (or percents) makes it look horrible when changing screen resolution to anything widescreen.

I would appreciate any tips, feel free to request more code, screenshots or something like that.
Thanks in advance!

EDIT: JSFiddle

Answer 1

#sideBar {
  float:left;
}
#innerContainer {
  display:table-cell;
  zoom:1;/*for IE*/
}

check this – http://jsfiddle.net/fRBWe/11/