Responsive width on main column using JS

Question

I have a responsive layout with 2 colums (main & sidebar). The side bar has a fixed width and the main column's width is responsive. do to the sidebar being a fixed width, I can't set the main column to 100% without the sidebar dropping down obviously. Is there any way to let javascript calculate the width of the main column depending on browser size? (taking into account the fixed width column that should be next to it)

#main {
	background-color: #0F0;
	float: left;
	height: 400px;
	width: 100%;
}
#sidebar {
	background-color: #C60;
	float: right;
	height: 400px;
	width: 300px;
}

<div id="main">
</div>

<div id="sidebar">
</div>

Weafs.py · Accepted Answer · 2015-01-03 05:49:58Z

This is possible using CSS's calc() function.

#main {
  background-color: #0F0;
  float: left;
  height: 400px;
  width: calc(100% - 300px);
}
#sidebar {
  background-color: #C60;
  float: right;
  height: 400px;
  width: 300px;
}
body {
  margin: 0;
}

<div id="main">
</div>
<div id="sidebar">
</div>

If you really want to use JavaScript you need set main's width equal to the window's width without scrollbar (document.body.clientWidth) minus sidebar's width.

Also, the function doMath() needs to be executed when the window is resized.

var main = document.getElementById('main');
var sidebar = document.getElementById('sidebar');

function doMath() {
  main.style.width = document.body.clientWidth - sidebar.offsetWidth + 'px';
}

doMath();
window.onresize = doMath;

#main {
  background-color: #0F0;
  float: left;
  height: 400px;
  width: 100%;
}
#sidebar {
  background-color: #C60;
  float: right;
  height: 400px;
  width: 300px;
}
body {
  margin: 0;
}

<div id="main">
</div>
<div id="sidebar">
</div>

Collectives™ on Stack Overflow

Responsive width on main column using JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related