setting the width on inline-block elements, CSS

Question

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>

Hi, did you find a solution to your issue? did my answer help? — web-tiki, Oct 28 '14 at 10:04

web-tiki · Answer 1 · 2014-10-21T12:03:32.623

2

You just need remove float:left; on #content so that it takes the remaining space :

DEMO

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)

edited Oct 21 '14 at 12:03

answered Oct 21 '14 at 11:48

web-tiki

99,765
32
217
249

hi thanks for the demo. but if you set the opacity:0.3; to the side bar.. then actually the content div is taking up the side bar. so content div color is having an effect on the sidebar color when it shouldn't. – user3105158 Oct 21 '14 at 11:59
@user3105158 ok, you need to add a left-margin to the content then : http://jsfiddle.net/webtiki/enphobxb/3/ – web-tiki Oct 21 '14 at 12:01

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Want to use inline-block?

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.

Example

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>

setting the width on inline-block elements, CSS

2 Answers2

Want to use inline-block?

Example