CSS Fixed & Fluid li together -


i have 3 images in separator , want make middle part fluid , left , right portions needs fixed. when open on page needs this; http://s8.postimg.org/r9dg5v6et/dsadsa.jpg

<ul class="separator">     <li class="sep-orj sep-left"></li>     <li class="sep-orj sep-middle"></li>     <li class="sep-orj sep-right"></li> </ul>  ul.separator {     width:100%; } ul.separator li.sep-orj {     height:21px;     display:block;     float:left; } ul.separator li.sep-left {     width:3%;     background: url(............./left-arrow.gif) repeat-x; } ul.separator li.sep-middle {     width:94%;     background: url(............./middle.gif) repeat-x; } ul.separator li.sep-right {     width:3%;     background: url(............./right-arrow.gif) repeat-x; } 

here 1 method using css3.

ul.separator {     margin: 0;     padding: 0; } ul.separator li.sep-orj {     height:21px;     display:block;     float:left; } ul.separator li.sep-left {     width:15px;     background: #ccc; } ul.separator li.sep-middle {     width: -webkit-calc(100% - 32px); /* 100% minus left-column, right-column, , border widths */     border: 1px solid #ccc; } ul.separator li.sep-right {     width:15px;     background: #ccc; } 

working fiddle: http://jsfiddle.net/tewx6/

don't forget, need use other vendor prefixes widths well. here chart letting know browsers support calc: http://caniuse.com/calc


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -