How to make two large divs stay side by side, and take up same width at all screen widths

Question

So I am making a website that uses this setup. A nav, a panel, and a main content area. The content area is filled with divs that will be resized by media queries. The issue is I want the panel to be a fixed width, and the main area to take up the rest of the screen on all screen sizes and automatically downsize. Example. If the panel's 255px width is 25% of the screen, I want the width of main to be the next 75% of the screen. It either takes up too much space and makes it scroll horizontally, or goes down to the new line. What would be the best solution

.panel {
  width: 255px;
  height: 100%;
  position: relative;
  float: left;
  background-color: orange;
}

.main {
  width: 88%;
  height: 100%;
  position: relative;
  float: left;
  background-color: red;
}

.nav {
  width: 100%;
  height: 300px;
  background-color: yellow;
}

<div class="panel">
  T
</div>
<div class="main">
  <div class="nav">
    T
  </div>
  T
</div>

LINK- https://jsfiddle.net/cn6q6keu/2/

score 0 · Answer 1 · answered Mar 06 '18 at 00:46

I'm afraid you're gonna have to apply this rule to the fixed width, so you'll be able to convert it to a relative unit like %:

(target ÷ context) * 100 = result

Target = panel fixed width;
Context = parent element width;
Result = Converted fixed width value in percentage.

score 0 · Accepted Answer · edited Mar 06 '18 at 06:51

You can do it with float and flex.

Here is a float solution:

*{
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body{
  height: 100%;
  min-height: 100%;
}

.clear-fix:before, .clear-fix:after{
    display: block;
    content: '';
    clear: both;
}

#main{
  height: 100%;
}

.panel, .nav{
  float: left;
  padding: 15px;
  height: 100%;
  min-height: 100%;
  overflow: auto;
}

.panel{
  background: pink;
  width: 225px;
}

.nav{
  background: red;
  width: calc(100% - 225px);
}

<div id="main" class="clear-fix">
  <div class="panel"></div>
  <div class="nav"></div>
</div>

Fiddle link: https://jsfiddle.net/3rxdub8d/5/

Here is a flex solution:

*{
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body{
  height: 100%;
  min-height: 100%;
}

#main{
  display: flex;
  height: 100%;
}

.panel, .nav{
  padding: 15px;
  height: 100%;
  min-height: 100%;
  overflow: auto;
}

.panel{
  background: pink;
  width: 225px;
}

.nav{
  background: red;
  flex: 1;
}

<div id="main" class="clear-fix">
  <div class="panel"></div>
  <div class="nav"></div>
</div>

Fiddle link: https://jsfiddle.net/xxwsa4oh/2/

How to make two large divs stay side by side, and take up same width at all screen widths

2 Answers2