html - center align three divs side by side with CSS -
i've got 3 div
s 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
Post a Comment