Side Bar With A No Previsible Width In Css/html

Is there a way to achieve the following behavior in css/html : Please note the green side bar has not to be responsive but I cannot give it a fixed width with width: XX px; becau

Solution 1:

You can achieve that easily with flexbox. Here's the example: http://codepen.io/anon/pen/JKXXNE

#container {
  display:flex;
}
#sidebar, #content {
  height: 100px;
}
#sidebar {
  background-color: green; 
}
#content {
  background-color: brown;
  flex: 1;
}

Solution 2:

You can use Flexbox, and if you set flex: 1 on right div it will take rest of free space and width of left div will still be dynamic.

.parent {
  display: flex;
  border: 2px solid black;
}
.left {
  background: #22B14C;
  padding: 10px;
}
.right {
  background: #EFE4B0;
  padding: 10px;
  flex: 1;
}
span {
  margin: 020px;
}

<divclass="parent"><divclass="left"><span>Span</span><span>Span</span></div><divclass="right">Right</div></div>

This can also be done with CSS Table layout you just need to set width: 100% on .right div and it will take rest of free space

.parent {
  display: table;
  border: 2px solid black;
}
.left {
  background: #22B14C;
  display: table-cell;
  padding: 10px;
}
.right {
  background: #EFE4B0;
  display: table-cell;
  width: 100%;
  padding: 10px;
}
span {
  margin: 020px;
}

<divclass="parent"><divclass="left"><span>Span</span><span>Span</span></div><divclass="right">Right</div></div>

Solution 3:

For older browsers, use display: table

html, body{
  height: 100%;
  margin: 0;
}
.tbl{
  display:table;
}
.row{
  display:table-row;
}
.cell{
  display:table-cell;
}
.content{
  width: 100%;
}
#left_col {
  background: orange none repeat scroll 00;
  width: 1%;
}
#right_col {
  background: green none repeat scroll 00;
  width: 100%;
}

<divclass="tbl content"><divclass="row"><divid="left_col"class="cell">
      wide&nbsp;content&nbsp;<br>
      content&nbsp;<br>
      wider&nbsp;contentcontent&nbsp;<br></div><divid="right_col"class="cell"></div></div></div>

Solution 4:

Another way to achieve this without using flexbox can be:

Working Fiddle:

https://jsfiddle.net/y00e5w6m/ (Note i have used sample css and input just to showcase how this can be done. This should be tuned a bit according to requirements)

Sample Output:

Html:

<divstyle="float:left;width:100%;border:1px solid #000;"><divid="dynamic-content"style="float:left;background-color:#090;border:1px solid #900"><divstyle="float;left;">
Mango
</div><divstyle="float;left;margin-left:5px;">
Banana
</div><divstyle="float;left;margin-left:5px">
Orange
</div></div><divid="other-content"style="float:left;background-color:#630;border:1px solid #009;"></div></div>

JS:

var items=["mango","grapes","banana"];
var windowWidth = $(window).width();
console.log(windowWidth);
var dynamicContentWidth = $("#dynamic-content").width();
console.log(dynamicContentWidth);
var otherContentWidth = dynamicContentWidth >= windowWidth ? windowWidth : windowWidth-dynamicContentWidth-20;

console.log(otherContentWidth);

$("#other-content").width(otherContentWidth);
$("#other-content").height($("#dynamic-content").height());