I am trying to make 5 panels evenly show across the page as seen here under the carousel... HERE. My css and html is below and i dont know how to evenly distribute it across the page. (So the end panel reaches the end). THANKS! .cur1 { display: inline; float: left; margin: 0 0px; width: 182px; } .cur1-last { margin-right: 0; display:inline; float:left; padding-right: 10px; margin:0 0px; width: 172px; } .cur1-first { display:inline; float:left; padding-left: 10px; margin:0 0px; margin-left: 0; width: 172px; } .midhpg { position:relative; width: 120px; height: 110px; border: 7px solid #C0C0C0; background-repeat: no-repeat; background-position: center; } .midhpg #tran { vertical-align: top; height: 20px; width: 120px; position: absolute; bottom: 0px; color: #177AB5; background-color: #2D2D2D; left: 0px; padding-left: 5px; padding-right;: 5px; padding-top: 2px; padding-bottom: 2px; opacity: 0.9; } .midhpg #tran a:link { color: #177AB5; font-weight: bold; font-size: 11px; } .midhpg #tran a:hover { color: #219AE2; font-weight: bold; font-size: 11px; } .midhpg #tran a:visited { color: #177AB5; font-weight: bold; font-size: 11px; } HTML: <div class="cur1-first"> <div style="background-image: url(imageurl);" class="midhpg"><div id="tran"><a href="#">Hello</a></div></div> </div> <div class="cur1"> <div style="background-image: url(imageurl);" class="midhpg"><div id="tran"><a href="#">Hello</a></div></div> </div> <div class="cur1"> <div style="background-image: url(imageurl);" class="midhpg"><div id="tran"><a href="#">Hello</a></div></div> </div> <div class="cur1"> <div style="background-image: url(imageurl);" class="midhpg"><div id="tran"><a href="#">Hello</a></div></div> </div> <div class="cur1-last"> <div style="background-image: url(imageurl);" class="midhpg"><div id="tran"><a href="#">Hello</a></div></div> </div> HTML: