Inline divs with one having custom width

Question

I am trying to code two inline Divs, one has defined width in px value while the other get the rest width of the container

<div class="wrapper">
    <div class="main">main</div>
    <div class="sidebar">sidebar (300px)</div>
</div>

Answer 1

Use CSS table layout as its super-easy to implement and has really good support. It also has the added benefit of balanced column heights - thus making columned layout a doddle to create.

html, body {min-height:100%; height:100%; margin:0;}
.wrapper {display:table; width:100%; height:100%; min-height;100%;}
.wrapper .main {display:table-cell; background:#eee;}
.wrapper .sidebar {display:table-cell; background:#666; width:300px;}

<div class="wrapper">
    <div class="main">main</div>
    <div class="sidebar">sidebar (300px)</div>
</div>

Answer 2

Didn't really give us much to go on, but I would suggest using display:table-cell; instead of inline-block.

.wrapper {
  display:table;
  width:100%;
}

.main, .sidebar {
  display:table-cell;
  border:1px solid black;
}

.sidebar {
  width:300px;
}

<div class="wrapper">
    <div class="main">main</div>
    <div class="sidebar">sidebar (300px)</div>
</div>

Answer 3

using calc without floats:

body,
div {
  padding: 0;
  border: 0;
  font-size: 0
}

.wrapper {
  width: 100%;
}

.main {
  display: inline-block;
  width: calc( 100% - 300px);
  background: blue;
  height: 50px;
}

.sidebar {
  display: inline-block;
  width: 300px;
  background: red;
  height: 50px;
}

<div class="wrapper">
  <div class="main">main</div>
  <div class="sidebar">sidebar (300px)</div>
</div>

this is kind of fragile , table or flexboxes are better_

---

flexbox example:

.wrapper {
  width: 100%;
  display:flex;
}

.main {
  flex-basis:300px;
  background: blue;
  height: 50px;
}

.sidebar {
  flex:1;
  background: red;
  height: 50px;
}

<div class="wrapper">
  <div class="main">main</div>
  <div class="sidebar">sidebar (300px)</div>
</div>