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!
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>
来源：https://stackoverflow.com/questions/7666880/div-with-a-width-of-100-next-to-a-fixed-width-one