css - Divs next to each other for Navigation -


i want have 3 div objects next each other navigation bar. there should image in right 1 begin navigation bar, 1 on end finish it, , middle part should wide needs to fit text in. , navigation bar should in middle of page. not sure if did totally wrong, because won't work @ all. code got.

html:

<div class="navigation"> <div class="navleft"></div> <div class="navmiddle">     <ul>         <li id="active"><a href="index.html">home</a></li>         <li><a href="info.html">info</a></li>     <li><a href="projects.html">projects</a></li>     <li><a href="contactus.html">contact us</a></li>     </ul> </div> <div class="navright"></div> </div> 

css:

.navigation{ margin:auto; height:70; }  .navigation ul { list-style: none;    }   .navigation ul li { display: inline; margin: 0px; }  .navleft{ float:left; width:13; height:70; background: url(../images/nav_l.png) }  .navmiddle{ height:70; background: url(../images/nav_mid.png) repeat-x; }  .navright{ float:right; width:13; height:70; background: url(../images/nav_r.png) } 

adding width: calc(100% - 26px); take remaining width of .navmiddle.

jsfiddle


Comments

Popular posts from this blog

c++ - CryptStringToBinary API behavior -

c++ - Correct method for redrawing a layered window -

java.util.scanner - How to read and add only numbers to array from a text file -