Geek Answers Handbook

Tries to get 3 divs floating at full screen length, and the middle div is dynamic

CSS markup:

body { margin: 0; background:#FFAA00; } #left { position: relative; background: url(footer_bg_social2.png) repeat-x 0 -70px; overflow:hidden; height: 70px; } #right { position: relative; background: url(footer_bg_social2.png) repeat-x 0 -70px; overflow:hidden; height: 70px; } #tab-seperator { height: 70px; } #tab-seperator div.tab-wrapper { position: relative; height: 70px; float:left; } #tab-seperator ul { position: relative; float: left; margin: 0; padding: 0; } #tab-seperator ul li { float:left; display:block; height: 70px; line-height: 70px; vertical-align:middle; } #tab-seperator ul li.start { background: url(footer_bg_social2.png) no-repeat 0 0; width:22px } #tab-seperator ul li.content { background: url(footer_bg_social2.png) repeat-x 0 -140px; } #tab-seperator ul li.end { background: url(footer_bg_social2.png) no-repeat -248px 0; width:22px }

HTML markup:

 <div id="tab-seperator"> <div id="left"> </div> <div class="tab-wrapper"> <ul> <li class="start"></li> <li class="content">testing..length</li> <li class="end"></li> </ul> </div> <div id="right"> </div> </div>

So, I am looking to get the left and right divs to fill the entire width of my page, varying in size depending on how long the middle part increases. Having problems getting this to work ... the above solution gets two lines making up the full page width, of course I want it all to be on 1 line.

+4
source share
2 answers

You can get .start and .end to cover the full width by specifying the width for .content li .

 <div id="tab-seperator"> <div id="left"> </div> <div class="tab-wrapper"> <ul id="oneline"> <li class="start">[start]</li> <li class="content">[testing..length]</li> <li class="end">[end]</li> </ul> </div> <div id="right"> </div> </div> #oneline {display:table;width:100%;background:#555;} .start, .content, .end {display:table-cell;} .content {width:50%;background-color:#777;}

See here for this: http://codepen.io/joe/pen/Ffzqm

0
source

You can make your divs like cell tables. Here's how I did it:

 #tab-seperator{ width:100%; display:table; } #left { width:auto; display:table-cell; } .tab-wrapper { width:1000px; /* Whatever you want the main container to be */ display:table-cell; } #right { width:auto; display:table-cell; }

You can see a live example HERE Just check the items

0
source

More articles:


All Articles