Div with a width of 100%, next to a fixed width one

Question

Sorry for the incredibly stupid question, I feel like in most circumstances I could do this easily, but I'm using sharepoint at the moment and trying to do anything in this is hell!

Basically I have a side navigation (.menu-vertical) that is 230px wide, and a div next to it (.mainContent) that I would like to (padding aside!) fill the rest of the screen.

Unfortunately there are around 798 randomly placed divs, spans and whatever else in the code too that I can't seem to strip without breaking the site, so any advice on exactly how to achieve this would be much appreciated, thank you!

Answer 1

Basically I have a side navigation (.menu-vertical) that is 230px wide, and a div next to it (.mainContent) that I would like to (padding aside!) fill the rest of the screen.

..

the basis of the site is in place with a .container div, and the .menu-vertical (fixed) and .mainContent (fluid, 100%) divs inside.

From what I understand, you're looking for this: http://jsfiddle.net/thirtydot/wv42t/

CSS:

.container {
    border: 3px solid #666;
    overflow: hidden
}
.menu-vertical {
    width: 230px;
    float: left;
    padding: 10px;
    border: 2px solid #f0f
}
.mainContent {
    overflow: hidden;
    padding: 30px;
    border: 2px solid #00f
}

HTML:

<div class="container">
    <div class="menu-vertical">menu-vertical</div>
    <div class="mainContent">mainContent</div>
</div>