html - center align three divs side by side with CSS -


i've got 3 divs side side in container sets width of user's window.

i want them stay nested next each other, , centered unit in dynamic container.
i'd without putting them div (mostly because have lot of them in page is).

html:

<div id="content">     <div id="nav_one">         <h3>collections</h3>         <p style="text-align:justify">blahblah</p>     </div>     <div id="nav_three">         <h3>collections</h3>         <p style="text-align:justify">blahblah</p>     </div>     <div id="nav_two">         <h3>collections</h3>         <p style="text-align:justify">blahblah</p>     </div> </div> 

css:

#nav_one {     width: 208px;     float: left;     padding: 20px 10px 20px 10px;     text-align: center; }  #nav_two {     width: 208px;     margin: 0 auto;     padding: 20px 10px 20px 10px;     text-align: center; }  #nav_three {     width: 208px;     float: right;     padding: 20px 10px;     text-align: center; } 

ok, after comment below, have better idea looking for, caveat of container div's requiring 208px. don't think margin: auto here center 3 in group, propose float: left , use jquery calculate #content div, subtract .container widths, , divide 2 left margin left-most .container div.

.container {     width:208px;     float:left;     padding:0;     margin: 0 auto;     text-align:center;     background-color: #cccccc; } .container p {     text-align:justify;     padding: 20px 10px 20px 10px; }  $(document).ready(function(){     var w = $('#content').width();     var calw = (parseint(w) - (208*3))/2;     $('#left').css('margin-left',calw+'px'); });  <div id="content">     <div class="container" id="left">         <h3>collections</h3>         <p>blahblah</p>     </div>     <div class="container">         <h3>collections</h3>         <p>blahblah</p>     </div>     <div class="container">         <h3>collections</h3>         <p>blahblah</p>     </div> </div> 

edit take account fixed-width 208px div containers, think easiest way use little bit of jquery:

$(document).ready(function(){     var w = $('#content').width();     var calw = (parseint(w) - (208*3))/2;     $('#left').css('margin-left',calw+'px'); }); 

here's jsfiddle demonstrate effect (updated above).

of course, @ point, might better off using container div margin auto applied it, , width of 3 contianer div's have it. of course, approach causes problems in ie due bug in way margin: auto handled.

.container2 {     width:208px;     float:left;     padding:0;     margin: 0 auto;     text-align:center;     background-color: #cccccc; } .container2 p {     text-align:justify;     padding: 20px 10px 20px 10px; } #content2 {     width: 624px;     background-color: #ccccaa;     margin: 0 auto; }  <div id="content2">     <div class="container2">         <h3>collections</h3>         <p>blahblah</p>     </div>     <div class="container2">         <h3>collections</h3>         <p>blahblah</p>     </div>     <div class="container2">         <h3>collections</h3>         <p>blahblah</p>     </div>     <br style="clear: both;"/> </div> 

showing both.


Comments

Popular posts from this blog

apache - Add omitted ? to URLs -

redirect - bbPress Forum - rewrite to wwww.mysite prohibits login -

php - How can I stop spam on my custom forum/blog? -