html - CSS Positioning - Fill whitespace from floated elements -


how go positioning box4 pushed against box1?

enter image description here

looking forward suggestions , appreciated.

<!doctype html> <html lang="en"> <head>     <meta charset="utf-8">     <title></title>     <link rel="stylesheet" href="align.css"> </head> <body>     <div>         <section class="boxes">         <b>box1</b>         lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt, nihil excepturi laudantium ipsum! voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?     </section>     <section class="boxes">     <b>box2</b>         lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt, nihil excepturi laudantium ipsum! voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?         lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt, nihil excepturi laudantium ipsum! voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?     </section>     <section class="boxes">     <b>box3</b>         lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt, nihil excepturi laudantium ipsum! voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?         lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt, nihil excepturi laudantium ipsum! voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?     </section>     <section class="boxes">     <b>box4</b>         lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt, nihil excepturi laudantium ipsum! voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?     </section>     <section class="boxes">     <b>box5</b>         lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt, nihil excepturi laudantium ipsum! voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?     </section> </div> 

.boxes {     width: 500px;     border: 1px solid black;     float: left; } 

either divide in 3 rows vertically , place in there elements, or have absolute position them math quite hard. no worries, there great plugin masonry handles you.

good luck!


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -