Div pushes down other div, CSS - html

Question

I want to add simple sidebar to existing layout (content).
So far I have like this.
HTML
<div class="container">
<div class="side-menui">
</div>
....
</div>
Full HTML
<div class="container">
<div class="side-menui">
</div>
<div class="banner-navigation-containet clearfix">
<div class="navigation-container pull-left">
<nav class="navbar" role="navigation">
<div class="container-fluid clearfix">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="http://www.lo.eu/lv">
<img alt="logo" class="img-responsive" src="./Ind_files/logo.png" title="logo">
</a>
</div>
<div class="selections">
<div class="pull-left">
<a aria-expanded="true" data-toggle="dropdown" href="http://www.lo.eu/lv?country_id=1#">LATVIJA</a>
<ul class="dropdown-menu">
IGAUNIJA
</ul>
</div>
<div class="pull-right">
<a aria-expanded="true" data-toggle="dropdown" href="http://www.lo.eu/lv?country_id=1#" id="dropdownMenu2">LV</a>
<ul class="dropdown-menu">
<li>RU</li>
</ul>
</div>
</div><!-- End language-container -->
</div><!-- /.container-fluid -->
</nav><!-- End navbar-->
</div><!--End navigation-container-->
<div class="banner-2 pull-left">
<img alt="Selection 011" class="img-responsive" height="90" id="banner" src="./Ind_files/Selection_011.jpg" width="500">
</div>
<div class="banner-3 pull-left" ;="">
<img alt="Selection 011" class="img-responsive" height="90" id="banner2" src="./Ind_files/Selection_011(1).jpg" width="500">
</div>
</div><!-- End banner-navigation-containet -->
<!--<div id="bag-icon" class="flip2"> <img alt="Bag icon" src="/assets/bag-icon.png" /></div>
<div id="nav-toggle-lines" class="flip"></div> -->
<div class="row block-list">
<div class="col-lg-4 col-md-3 col-sm-2 col-xs-1 block clearfix" id="advertisement-col" style="display:none; border:none;">
</div><!-- End block-->
<div class="col-lg-4 col-md-3 col-sm-2 col-xs-1 block clearfix">
<div class="block-main-info clearfix">
<div class="pull-left block-main-title">dasdad</div>
<div class="pull-left block-main-location">Buļļi</div>
<div class="pull-left block-main-id">ID </div>
</div><!-- End block-main-info -->
<div class="pull-left block-image">
<a class="" href="http://www.lo.eu/lv?country_id=1#" onclick="loginModalShow();" require_login="true"><img alt="dasdad" src="./Ind_files/block-2-image(1).jpg" title="dasdad"></a>
</div><!-- End block-image -->
<div class="pull-left block-info">
<table>
<tbody><tr class="block-age">
<td class="block-info-image"></td>
<td class="block-info-number">22</td>
<td class="block-info-text">teksts</td>
</tr>
<tr class="block-length">
<td class="block-info-image"></td>
<td class="block-info-number">148</td>
<td class="block-info-text">teksts</td>
</tr>
<tr class="block-weight">
<td class="block-info-image"></td>
<td class="block-info-number">43</td>
<td class="block-info-text">teksts</td>
</tr>
<tr class="block-bust">
<td class="block-info-image"></td>
<td class="block-info-number">1</td>
<td class="block-info-text">teksts</td>
</tr>
</tbody></table>
<div class="block-bottom-info">
<div class="block-info-tel-number"><span>+371</span> 26262626</div>
<div class="clearfix">
<div class="pull-left">stunda:</div>
<div class="pull-right"><b>60</b>EUR</div>
</div>
</div><!-- End block-info -->
</div><!-- End block-info -->
</div><!-- End block-->
</div><!-- End row-->
<div class="panel">
<form accept-charset="UTF-8" action="http://www.lo.eu/lv/girls" class="girl_search" data-remote="true" id="girl_search" method="get"><div style="display:none"><input name="utf8" type="hidden" value="✓"></div>
<div class="sort-links">
<div class="input-group">
<input class="form-control" id="q_name_or_phone_number_or_identifier_cont" name="q[name_or_phone_number_or_identifier_cont]" placeholder="Search..." type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><img alt="Search icon" src="./Ind_files/search-icon.png" width="15"></button>
</div>
</div>
</div>
<div id="sorter">
<div id="left">
<select id="q_region_id_eq" name="q[region_id_eq]"><option value="">RAJONS</option>
</div>
<div id="center">
<a class="sort_link " data-method="get" data-remote="true" href="http://www.lo.eu/lv?country_id=1&q%5Bs%5D=height+asc">AUGUMS</a>
</div>
<div id="right">
<a class="sort_link " data-method="get" data-remote="true" href="http://www.lo.eu/lv?country_id=1&q%5Bs%5D=bust_size+asc">KRŪTIS</a>
</div>
</div>
<div id="sorter">
<div id="left">
<a class="sort_link " data-method="get" data-remote="true" href="http://www.lo.eu/lv?country_id=1&q%5Bs%5D=age+asc">VECUMS</a>
</div>
<div id="center">
<a class="sort_link " data-method="get" data-remote="true" href="http://www.lo.eu/lv?country_id=1&q%5Bs%5D=per_hour+asc">CENA</a>
</div>
<div id="right">
<a class="sort_link " data-method="get" data-remote="true" href="http://www.lo.eu/lv?country_id=1&q%5Bs%5D=votes_for.size+asc">REITINGS</a>
</div>
</div>
<div class="clickable">
MEITENES
<span>MEITENES</span>
</div>
<div class="clickable" id="blacklist-menu">
MELNAIS SARAKSTS
<span>MELNAIS SARAKSTS
<div class="pull-right">
<div id="icon-side"> >
<!--- <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> -->
</div>
<div id="icon-down" style="display:none;">
<!--<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span> -->
</div>
</div>
</span>
</div>
<!-- Noslēptās izvēles -->
<div class="clickable" id="hiden" style="display:none;">
<a class="" href="http://www.lo.eu/lv?country_id=1#" onclick="loginModalShow();" require_login="true">Meitenes </a>
<span>MEITENES</span>
</div>
<div class="clickable" id="hiden2" style="display:none;">
<a class="" href="http://www.lo.eu/lv?country_id=1#" onclick="loginModalShow();" require_login="true">Klienti </a>
<span>KLIENTI</span>
</div>
<!-- Noslēptās izvēles BEIGAS-->
<div class="clickable" id="shown">
NOTEIKUMI
<span>NOTEIKUMI</span>
</div>
<div class="clickable" id="shown2">
IESNIEGT SLUDINĀJUMU
<span>IESNIEGT SLUDINĀJUMU</span>
</div>
</form>
</div>
<div class="panel2">
<div class="dr">
<div class="clickable2">
<a class="" href="http://www.lo.eu/lv?country_id=1#" onclick="loginModalShow();" require_login="true">IENĀKT</a>
<span>Ieiet</span>
</div>
<div class="clickable2">
ANKETA
<span>Anketa</span>
</div>
<div class="clickable2">
<a data-target="#usersignup" data-toggle="modal" href="http://www.lo.eu/lv?country_id=1#" id="asaa">REĢISTRĒTIES</a>
<span>Reģistrēties</span>
</div>
<div class="clickable2">
PALĪDZĪBA
<span>Palīdzība</span>
</div>
</div><!-- End block-->
</div>
</div><!-- End container -->
CSS
.container {
width: 1170px;
padding: 0;
}
div.side-menui {
position: relative;
left:-20px;
z-index: 5;
width:35px;
height:350px;
border:1px solid gray;
}
Problem: side-menui pushes down all content exactly his height.
What I need:
I googled for similar questions tried other positions like absolute, fixed .. but I got way worse results than I have already.
I am missing something very straightforward ?

Answer 1

you need to take the element out of flow so that it isnt going to effect anything else.
you can do this by either setting
float: left;
or
position: absolute; /* or fixed */