How to accomplish this layout in HTML/CSS?


Tags: html,css

Problem :

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:

enter image description here

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>



Solution :

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>


    CSS Howto..

    css how to remove the empty space at the left

    how to customize css ellipse for a text string [duplicate]

    How to apply a fixed backgound in fullpage.js

    How to change text direction of every line of text using javascript/jquery?

    Rails 3: jquery working to switch view with AJAX, how to get an focused state for the link?

    How to change active link color in bootstrap css?

    how to set two div's height equal with css

    How do I achieve a fully working image scrolling effect like in this example?

    How to stretch div height to fill parent div - CSS

    slide show with bootstrap

    How to find the highest z-index using jQuery

    How to position boxes like a posterboard with CSS?

    How to make div size bigger?

    Keyboard Showed messed up elements' position

    How to add color to text in my div with code

    how to get value from this html date-ranger?

    How can I replace text value to star

    How to convert a JSON object (created by jquery-css-parser) back to valid CSS code? [closed]

    How to make background image with aspect ratio in html and css [closed]

    How do I hide the div if the Var is empty?

    How to redefine CSS classes with Javascript

    How to add dynamic CSS source urls in Squishit?

    Using CSS or Java to Show or Hide Empty Content Area

    3 column css how to make the columns even?

    How to create a

    How to make a header that changes position (like Pinterest)

    How to have 2+ boxes slide down

    How to make dynamic picture boxes with text on bottom with css?

    How do I inspect CSS pseudo classes with firebug?

    how to add background images using css in phonegap