Div pushes down other div, CSS
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">
<a href="http://www..eu/lv?country_id=2">IGAUNIJA</a>
</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><a href="http://www.lo.eu/ru">RU</a></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">
<a href="http://www.lo.eu/lv/girls">MEITENES</a>
<span>MEITENES</span>
</div>
<div class="clickable" id="blacklist-menu">
<a href="http://www.lo.eu/lv?country_id=1#">MELNAIS SARAKSTS</a>
<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">
<a href="http://www.lo.eu/lv/rules">NOTEIKUMI </a>
<span>NOTEIKUMI</span>
</div>
<div class="clickable" id="shown2">
<a href="http://www.lo.eu/lv/girls/new">IESNIEGT SLUDINĀJUMU </a>
<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">
<a href="http://www.lo.eu/lv">ANKETA</a>
<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">
<a href="http://www.lo.eu/lv/help">PALĪDZĪBA</a>
<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 ?
1 answers
solution1
2 ACCPTED 2015-03-11 16:02:46
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 */
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Div text pushes down other divs
Text pushes <div> down
Adding a new element inside div pushes other elements down and out
Contents of one div in a row pushes the other Divs down
jQuery/Css : A pop-up content Div pushes the page down
CSS: Inline Div with auto width pushes down when the text is long
IE8 div pushes down
Text (div) pushes image(div) down
div pushes down buttons (div and buttons have the exact same css attributes)
H1 tag pushes div down
Related Tags