My pen: http://codepen.io/helloworld/pen/AHdLm
I have 3 divs:
A left and right div with a fixed width of 40px; (red colored) Between is a middle div with a fluid width of 100%;
Of course 40px + 100% + 40px will always wrap the divs just like it is now.
I can not use position:fixed for a solution and I need it for IE8+.
How can I achieve that?
HTML
<div id="wrapper">
<div style="float:left;width:40px;height:80px;background:red;">Left</div>
<div style="float:left;" class="table">
<div id="navBar" >
<div class="cellContainer">
<div class="template">11</div>
</div>
<div class="cellContainer">
<div class="template">22</div>
</div>
<div class="cellContainer">
<div class="template">33</div>
</div>
<div class="cellContainer">
<div class="template">44</div>
</div>
</div>
</div>
<div style="float:left;width:40px;height:80px;background:red;">Right</div>
<div style="clear:both" />
</div>
CSS
.cellContainer {
width: 20%;
float: none;
display: inline-block;
}
.table {
display: table;
width: 100%;
margin: 0 auto;
background-color: orange;
}
.template{
height: 80px;
margin: 10px;
background: lightgray;
border: black solid 1px;
padding-left: 5px;
font-size: 14px;
text-align: left;
cursor: pointer;
}
#navBar {
border: black solid 1px;
text-align: center;
}
Use this css for .table
.table {
position: absolute;
left: 40px;
right: 40px;
margin: 0 auto;
background-color: orange;
}
and use float: right;
for the right div.
try this:
<div id="wrapper">
<div style="float:left;width:40px;height:80px;background:red;margin-left:-40px;">Left</div>
<div style="float:left; width:100%;background:blue;" class="table">
<div id="navBar" >
<div class="cellContainer">
<div class="template">11</div>
</div>
<div class="cellContainer">
<div class="template">22</div>
</div>
<div class="cellContainer">
<div class="template">33</div>
</div>
<div class="cellContainer">
<div class="template">44</div>
</div>
</div>
</div>
<div style="float:right;width:40px;height:80px;background:red; margin-right:-40px;">Right</div>
<div style="clear:both"></div>
</div>
css:
#wrapper {padding:0 40px;}
however the above will not keep your columns the same height. If you want to do this you can go the display:table
route (but this isn't compatible with earlier versions of ie):
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.