How to accomplish this layout in HTML/CSS?

Question

Why are the floating elements are not properly arranged? My images have some white space and I have no idea from where it comes from.

The desired look:

The code:

 .inner-wrapper { float: left; width: 100%; color: #000; } .feature-1 { float: right; margin: 0 auto; width: 50%; height: auto; } .aside-image-1 { float: left; margin: 0 auto; height: auto; width: 50%; } .feature-2 { float: left; margin: 0 auto; width: 50%; height: auto; } .aside-image-2 { float: right; margin: 0 auto; height: auto; width: 50%; } .feature-3 { float: right; margin: 0 auto; width: 50%; height: auto; } .aside-image-3 { float: left; margin: 0 auto; height: auto; width: 50%; clear: both; } 

 <section class="inner-wrapper"> <aside class="aside-image-1"> <img src="https://s13.postimg.org/xsvgi16hv/feature_1.jpg" title="someText" alt="someText"> </aside> <article class="feature-1"> <h3>In-Store Interactive Tablet</h3> <p>Shoppers can use Sellr's Help Me Choose feature to</p> </article> </section> <section class="inner-wrapper"> <aside class="aside-image-2"> <img src="https://s13.postimg.org/t89a33msj/feature_2.jpg" title="someText" alt="someText"> </aside> <article class="feature-2"> <h3>In-Store Interactive Tablet</h3> <p>Shoppers can use Sellr's Help Me Choose feature to</p> </article> </section> <section class="inner-wrapper"> <aside class="aside-image-3"> <img src="https://s13.postimg.org/9ex6ae9er/feature_3.jpg" title="someText" alt="someText"> </aside> <article class="feature-3"> <h3>In-Store Interactive Tablet</h3> <p>Shoppers can use Sellr's Help Me Choose feature to</p> </article> </section> 

Answer 1

Check this...

Make the image's width 100% and Text-align center

 .inner-wrapper { float: left; width: 100%; color: #000; } .feature-1 { float: right; margin: 0 auto; width: 50%; height: auto; text-align: center; } .aside-image-1 { float: left; margin: 0 auto; height: auto; width: 50%; } .feature-2 { float: left; margin: 0 auto; width: 50%; text-align: center; height: auto; } .aside-image-2 { float: right; margin: 0 auto; height: auto; width: 50%; } .feature-3 { float: right; margin: 0 auto; width: 50%; height: auto; text-align: center; } .aside-image-3 { float: left; margin: 0 auto; height: auto; width: 50%; clear: both; } .aside-image-1 img { width: 100%; float: left; } .aside-image-2 img { width: 100%; float: left; } .aside-image-3 img { width: 100%; float: left; } 

 <section class="inner-wrapper"> <aside class="aside-image-1"> <img src="https://s13.postimg.org/xsvgi16hv/feature_1.jpg" title="someText" alt="someText"> </aside> <article class="feature-1"> <h3>In-Store Interactive Tablet</h3> <p>Shoppers can use Sellr's Help Me Choose feature to</p> </article> </section> <section class="inner-wrapper"> <aside class="aside-image-2"> <img src="https://s13.postimg.org/t89a33msj/feature_2.jpg" title="someText" alt="someText"> </aside> <article class="feature-2"> <h3>In-Store Interactive Tablet</h3> <p>Shoppers can use Sellr's Help Me Choose feature to</p> </article> </section> <section class="inner-wrapper"> <aside class="aside-image-3"> <img src="https://s13.postimg.org/9ex6ae9er/feature_3.jpg" title="someText" alt="someText"> </aside> <article class="feature-3"> <h3>In-Store Interactive Tablet</h3> <p>Shoppers can use Sellr's Help Me Choose feature to</p> </article> </section> 

Answer 2

add some property to your image tag

img{
  width:100%;
  } 

 .inner-wrapper { float: left; width: 100%; color: #000; } .feature-1 { float: right; margin: 0 auto; width: 50%; height: auto; } .aside-image-1 { float: left; margin: 0 auto; height: auto; width: 50%; } .feature-2 { float: left; margin: 0 auto; width: 50%; height: auto; } .aside-image-2 { float: right; margin: 0 auto; height: auto; width: 50%; } .feature-3 { float: right; margin: 0 auto; width: 50%; height: auto; } .aside-image-3 { float: left; margin: 0 auto; height: auto; width: 50%; clear: both; } img{ width:100%; } 

 <section class="inner-wrapper"> <aside class="aside-image-1"> <img src="https://s13.postimg.org/xsvgi16hv/feature_1.jpg" title="someText" alt="someText"> </aside> <article class="feature-1"> <h3>In-Store Interactive Tablet</h3> <p>Shoppers can use Sellr's Help Me Choose feature to</p> </article> </section> <section class="inner-wrapper"> <aside class="aside-image-2"> <img src="https://s13.postimg.org/t89a33msj/feature_2.jpg" title="someText" alt="someText"> </aside> <article class="feature-2"> <h3>In-Store Interactive Tablet</h3> <p>Shoppers can use Sellr's Help Me Choose feature to</p> </article> </section> <section class="inner-wrapper"> <aside class="aside-image-3"> <img src="https://s13.postimg.org/9ex6ae9er/feature_3.jpg" title="someText" alt="someText"> </aside> <article class="feature-3"> <h3>In-Store Interactive Tablet</h3> <p>Shoppers can use Sellr's Help Me Choose feature to</p> </article> </section> 

Answer 3

body{
margin:0px;
padding:0px;
}

and images width should be 100%;

 .inner-wrapper { float: left; width: 100%; color: #000; } .feature-1 { float: right; margin: 0 auto; width: 50%; height: auto; } .aside-image-1 { float: left; margin: 0 auto; height: auto; width: 50%; } .feature-2 { float: left; margin: 0 auto; width: 50%; height: auto; } .aside-image-2 { float: right; margin: 0 auto; height: auto; width: 50%; } .feature-3 { float: right; margin: 0 auto; width: 50%; height: auto; } .aside-image-3 { float: left; margin: 0 auto; height: auto; width: 50%; clear: both; } 

 <section class="inner-wrapper"> <aside class="aside-image-1"> <img src="https://s13.postimg.org/xsvgi16hv/feature_1.jpg" style="width:100%" title="someText" alt="someText"> </aside> <article class="feature-1"> <h3>In-Store Interactive Tablet</h3> <p>Shoppers can use Sellr's Help Me Choose feature to</p> </article> </section> <section class="inner-wrapper"> <aside class="aside-image-2"> <img src="https://s13.postimg.org/t89a33msj/feature_2.jpg" style="width:100%" title="someText" alt="someText"> </aside> <article class="feature-2"> <h3>In-Store Interactive Tablet</h3> <p>Shoppers can use Sellr's Help Me Choose feature to</p> </article> </section> <section class="inner-wrapper"> <aside class="aside-image-3"> <img src="https://s13.postimg.org/9ex6ae9er/feature_3.jpg" style="width:100%" title="someText" alt="someText"> </aside> <article class="feature-3"> <h3>In-Store Interactive Tablet</h3> <p>Shoppers can use Sellr's Help Me Choose feature to</p> </article> </section>