html - Width 100% of space between floated left and right div -


illustration

i have div on left side , on right side, both fixed width. have middle div witch fixed width. want middle div stay in middle of left , right div no matter screen reslolution, space left mid div , space mid right div shold same allways. how can that?

this got far:

html:

<div id="container">     <div id="left">     </div>     <div id="content">     </div>     <div id="right">     </div> </div> 

css:

div{     border: 1px solid black;     height: 200px; } #container{     width: 100%; } #left{     width: 50px;     float: left; } #content{     width: 150px;     float: left;     margin: 0 auto; } #right{     width: 100px;     float: right; } 

http://jsfiddle.net/y5zct/

you can position left , right divs absolutely , have center div in middle.

html

<div id="container">     <div id="left"></div>     <div id="content"></div>     <div id="right"></div> </div> 

css

div {     border: 1px solid black;     height: 200px; } #container {     width: 100%;     position: relative; } #left {     width: 50px;     position: absolute;     left: 0;     top: 0; } #content {     width: 150px;     margin: 0 auto;     border:1px solid #f00; } #right {     width: 100px;     position: absolute;     right: 0;     top: 0; } 

jsfiddle


Comments

Popular posts from this blog

php - Why I am getting the Error "Commands out of sync; you can't run this command now" -

linux - Does gcc have any options to add version info in ELF binary file? -

java - Are there any classes that implement javax.persistence.Parameter<T>? -