Switching Divs Won't Replace Position

[starwag]

I am trying to switch two divs on an onclick command to a search button.  One div should replace the other entirely.  I have tried to do this two ways:

1) make Div 1 width = 0 when Div 2 width = 100%, and vice versa

2) make Div 1 display = none when Div 2  display = block, and vice versa.

My problem is that while both make Div 1 disappear when Div 2 is visible, and Div 2 disappear when Div 1 is visible, in both cases Div 2 remains stacked below the area designated for Div 1, and it should replace its position entirely.  Any suggestions why this might be doing this and/or, is there a better way to accomplish this than just changing the CSS?

I am including the JS, HTML, and CSS attending this problem.  Thanks ahead of time:

JS (from Option 2)

function getSearch() {
    document.getElementById("searchcontainer").style.display = "block";
    document.getElementById("blogcontainer").style.display = "none";
}

HTML 

<div id="rightcontainer">
<div id="searchbox">
<form>
                                <input type="text" placeholder="Search..." required>
                                <input id="cardib" type="button" value="Search" onclick="getSearch()">
</form>
</div>

<button id="down" onclick="scrollDown()" onmouseenter="Highlight1()">&#9660</button>
<button id="up" onclick="scrollUp()" onmouseenter="Highlight2()">&#9650</button>

<div id="blogcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()">


<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">Valentines and Rats</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>
<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">Valentines and Rats</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>



<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">Valentines and Rats</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>



<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">Valentines and Rats</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>










<div id="searchcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()">


<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">OMG</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>
<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">OMG</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>



<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">OMG</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>



<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">OMG</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>



</div>



</div>

CSS

#blogcontainer{
	width: 100%;
	height: 90%;
	float: left;
	overflow-y: hidden;
	padding: 0;
	position: static;
	float: left;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;

}

#searchcontainer{
	width: 100%;
	height: 90%;
	float: left;
	overflow-y: hidden;
	padding: 0;
	position: static;
	float: left;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;

}

#rightcontainer {
	height: 100vh;
	width: calc( 100% - 20vh - (.678*(100%-20vh)));
	position: fixed;
	overflow: hidden;
	background-color: gray;
	margin-left: calc((.678*(100%-20vh)) + 20vh);
	float: left;
	margin-right: 0;


}

 

[Funce]

I just fiddled with a couple of things in your code, it works fine, except for that fact that your search container is inside your blog container. It doesn't look like there's that much formatting in your code (unless your editor and the forum doesn't play nice).

Here's a version that may work with some corrected styles too. (I just added display: none to the search container)

CSS:

#blogcontainer {
  width: 100%;
  height: 90%;
  float: left;
  overflow-y: hidden;
  padding: 0;
  position: static;
  float: left;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}

#searchcontainer {
  width: 100%;
  height: 90%;
  float: left;
  overflow-y: hidden;
  padding: 0;
  position: static;
  display: none;
  float: left;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}

#rightcontainer {
  height: 100vh;
  width: calc(100% - 20vh - (0.678 * (100%-20vh)));
  position: fixed;
  overflow: hidden;
  background-color: gray;
  margin-left: calc((0.678 * (100%-20vh)) + 20vh);
  float: left;
  margin-right: 0;
}

HTML:

<div id="rightcontainer">
  <div id="searchbox">
    <form>
      <input type="text" placeholder="Search..." required />
      <input id="cardib" type="button" value="Search" onclick="getSearch()" />
    </form>
  </div>

  <button id="down" onclick="scrollDown()" onmouseenter="Highlight1()">
    &#9660;
  </button>
  <button id="up" onclick="scrollUp()" onmouseenter="Highlight2()">
    &#9650;
  </button>

  <div id="blogcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()">
    <div class="postcontainer">
      <div class="thumb"></div>
      <div class="topblock">
        <div class="titleblock">Valentines and Rats</div>
        <div class="moreblock">MORE ></div>
      </div>
      <div class="block">
        <div class="date"><p>February 14, 2016</p></div>
        We celebrate Valentine's Day while I battle rats in the coop.
      </div>
    </div>
    <div class="postcontainer">
      <div class="thumb"></div>
      <div class="topblock">
        <div class="titleblock">Valentines and Rats</div>
        <div class="moreblock">MORE ></div>
      </div>
      <div class="block">
        <div class="date"><p>February 14, 2016</p></div>
        We celebrate Valentine's Day while I battle rats in the coop.
      </div>
    </div>

    <div class="postcontainer">
      <div class="thumb"></div>
      <div class="topblock">
        <div class="titleblock">Valentines and Rats</div>
        <div class="moreblock">MORE ></div>
      </div>
      <div class="block">
        <div class="date"><p>February 14, 2016</p></div>
        We celebrate Valentine's Day while I battle rats in the coop.
      </div>
    </div>

    <div class="postcontainer">
      <div class="thumb"></div>
      <div class="topblock">
        <div class="titleblock">Valentines and Rats</div>
        <div class="moreblock">MORE ></div>
      </div>
      <div class="block">
        <div class="date"><p>February 14, 2016</p></div>
        We celebrate Valentine's Day while I battle rats in the coop.
      </div>
    </div>
  </div>
  <div id="searchcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()">
    <div class="postcontainer">
      <div class="thumb"></div>
      <div class="topblock">
        <div class="titleblock">OMG</div>
        <div class="moreblock">MORE ></div>
      </div>
      <div class="block">
        <div class="date"><p>February 14, 2016</p></div>
        We celebrate Valentine's Day while I battle rats in the coop.
      </div>
    </div>
    <div class="postcontainer">
      <div class="thumb"></div>
      <div class="topblock">
        <div class="titleblock">OMG</div>
        <div class="moreblock">MORE ></div>
      </div>
      <div class="block">
        <div class="date"><p>February 14, 2016</p></div>
        We celebrate Valentine's Day while I battle rats in the coop.
      </div>
    </div>

    <div class="postcontainer">
      <div class="thumb"></div>
      <div class="topblock">
        <div class="titleblock">OMG</div>
        <div class="moreblock">MORE ></div>
      </div>
      <div class="block">
        <div class="date"><p>February 14, 2016</p></div>
        We celebrate Valentine's Day while I battle rats in the coop.
      </div>
    </div>

    <div class="postcontainer">
      <div class="thumb"></div>
      <div class="topblock">
        <div class="titleblock">OMG</div>
        <div class="moreblock">MORE ></div>
      </div>
      <div class="block">
        <div class="date"><p>February 14, 2016</p></div>
        We celebrate Valentine's Day while I battle rats in the coop.
      </div>
    </div>
  </div>
</div>