I'm having a problem having two divs side by side of each other. Left div(sidebar) set to a fix width and I want the right div("content") to take up the remaining space on the right. At the moment, I can set the right div to take a fixed width, on the right. Demo I want this done without setting a margin-left on the sidebar.
Thanks
Html
<div style="height: 100%">
<div id="Header"></div>
<div id="container">
<div id="sidebar"></div>
<div id="content">fff</div>
</div>
You just need remove float:left; on #content so that it takes the remaining space :
EDIT :
If you want a transparent background on the sidebar, you need to add left-margin:240px to #content so that the content doesn't appear through the sidebar (demo updated)
In the title you specify display: inline-block.
We can do this and keep the sidebar fixed using calc(100% - 240px) to remove the sidebar width from the width of #content.
Having the divs like this: <div id="sidebar"></div><div id="content">fff</div> prevents an inline gap. More information here.
I have removed the scroll with height: calc(100% - 30px) on #container to remove the header height. Not critical enough for an old browser fallback.
Browser support: Of course, be aware of browser compatibility using calc() - IE 9 +. We can use an un-optimised fallback width for older browsers or, if really needed, I have included a basic jQuery calc() fallback that will set the width if calc() is not supported.
The jQuery fallback is from this answer. I added a width check so it will only run when the width is too small. This is particularly good if you include the jQuery library anyway.
Note vertical-align: top to keep the inline-block divs positioned correctly vertically.
// calc fallback - optional
var checkWidth = $('#outer').width() - 240;
var contentWidth = $('#content').width();
if (checkWidth !== contentWidth) {
alert('no calc :(');
$('#content').css('width', '100%').css('width', '-=240px');
$(window).resize(function() {
$('#content').css('width', '100%').css('width', '-=240px');
});
} else {
alert('has calc :D !');
}* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#Header {
height: 30px;
background-color: yellow;
}
#container {
height: calc(100% - 30px);
width: 100%;
}
#sidebar {
background-color: orange;
height: 100%;
opacity: 0.3;
width: 240px;
display: inline-block;
vertical-align: top;
}
#content {
background-color: blue;
height: 100%;
width: calc(100% - 240px);
display: inline-block;
vertical-align: top;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="height: 100%" id="outer">
<div id="Header"></div>
<div id="container">
<div id="sidebar"></div><div id="content">fff</div>
</div>
</div>
