html - How do i have side elements stretch to fill remaining screen space outside of the container? -
this how it's supposed like: http://puu.sh/mlqjo/85df693983.png
the logic of have red element on left stretch fill remaining space besides contained, grey on right. using bootstrap elements in center occupy 1170px, or 1140px, if exclude paddings. tried adding before , after children first , last elements , used absolute positioning trying stretch them way margins of screen. no reliable method of calculating length comes mind, , can't use overflow because main element contains dropdowns. do?
this html:
<div class="body-width-container"> <div class="container"> <div class="battery-finder battery-finder--inactive"> <div class="battery-finder__label"> alege bateria </div> <div class="battery-finder__icon"> <i class="icon icon-battery"></i> <div class="battery-finder__icon::after"></div> </div> <div class="dropdown battery-finder__select battery-finder__select--fuel"> <button class="dropdown-toggle" type="button" data-toggle="dropdown"> combustibil <i class="icon icon-fuel"></i> <span class="battery-finder__select__arrows"> <i class="fa fa-angle-up"></i> <i class="fa fa-angle-down"></i> </span> </button> <ul class="dropdown-menu"> <li><a href="#">test 1</a></li> <li><a href="#">test 2</a></li> <li><a href="#">test 3</a></li> </ul> </div> <div class="dropdown battery-finder__select battery-finder__select--manufacturer"> <button class="dropdown-toggle" type="button" data-toggle="dropdown"> marca <i class="icon icon-car-front"></i> <span class="battery-finder__select__arrows"> <i class="fa fa-angle-up"></i> <i class="fa fa-angle-down"></i> </span> </button> <ul class="dropdown-menu"> <li><a href="#">test 1</a></li> <li><a href="#">test 2</a></li> <li><a href="#">test 3</a></li> </ul> </div> <div class="dropdown battery-finder__select battery-finder__select--model"> <button class="dropdown-toggle" type="button" data-toggle="dropdown"> model <i class="icon icon-car-side"></i> <span class="battery-finder__select__arrows"> <i class="fa fa-angle-up"></i> <i class="fa fa-angle-down"></i> </span> </button> <ul class="dropdown-menu"> <li><a href="#">test 1</a></li> <li><a href="#">test 2</a></li> <li><a href="#">test 3</a></li> </ul> </div> <div class="dropdown battery-finder__select battery-finder__select--year"> <button class="dropdown-toggle" type="button" data-toggle="dropdown"> anul <i class="icon icon-calendar"></i> <span class="battery-finder__select__arrows"> <i class="fa fa-angle-up"></i> <i class="fa fa-angle-down"></i> </span> </button> <ul class="dropdown-menu"> <li><a href="#">test 1</a></li> <li><a href="#">test 2</a></li> <li><a href="#">test 3</a></li> </ul> </div> <button class="battery-finder__button"> <i class="icon icon-magnifier"></i> </button> </div> </div> </div> and css:
.container .battery-finder__label:before{ content: ""; display: block; height: 100%; position: absolute; left: -1000px; right: 100%; background-color: inherit; } .container .battery-finder__button:before{ content: ""; display: block; height: 100%; position: absolute; right: -1000px; left: 100%; background-color: inherit; } .body-width-container { overflow: hidden; }
it possible use table:
<table style="width:100%; table-layout: fixed;"> <tr> <td style="width: 50%; background-color: blue"> </td> <td style="width: 1170px;"> header </td> <td style="width: 50%; background-color: red"> </td> </tr> 
Comments
Post a Comment