css float - Css divs alignment layout -


i have problem css divs alignment. think alignment incorrect. right on left , better centered.

http://bit.ly/voqkhw

i tried div ".post" , floating not work. possible solve ?

thanks.

such layouts require heavy use of javascript. 1 of ways acheive you're trying create n columns , dynamically fill them using js + hide/show columns using @media queries. in case html go this:

<div class="content">     <div class="column">         <div class="post">         ...         </div>         <div class="post">         ...         </div>     </div>     <div class="column">         <div class="post">         ...         </div>         <div class="post">         ...         </div>     </div> </div> 

on $(window).resize() (jquery) you'd add or remove columns , re-arrange posts based on width , height. , you'd use media queries set width of displayed columns, pretty so:

@media , (max-width:1000px) {     .column{width:50%;} /*that make 2 equal columns     when screen width <=1000 */ }  @media , (max-width:1500px) {     .column{width:33.3333%;} /*that make 3 equal columns     when screen width <=1500 */ }  .post {width:100%;} .column {float:left;} 

if you'd provide more details - you'd more detailed answer , less downvotes.


Comments