Two Column div Alignment Possible Methods (With Image and Content)

Solution 1: To start with, create a basic HTML code for a section with Div and Classes

We have created a section and divided it into two sections left div and right div. After that added a meaningful class name (float-right) for better understanding.

<div class=”two-column-module”>
         <div class=”left float-right”>
         <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry </p>
         </div>
         <div class=”right”>
         <img src="assets/images/functional-bottom-banner.jpg">
         </div>
</div>

Solution 2: Two column solution using CSS. You can use anyone of the below method.

Method 1:   Using CSS style code

.Left.float-right{
          	Float:right;
          }

Method 2:  Child concept explained

If one more than one section are used we can align using child concept. Here we have created a code for repetitive two-column-module div’s.

.two-column-module:nth-child(2n+2) 
.left{
Float:right; 
}

Method 3: Incase if you want to align in odd-even method

.two-column-module:nth-child(even).left{
  Float:right;
}

Web design is all about great design and performance, so try your hands and experiment with the methods.