Learn basic two column div alignment with both image and content

August 17, 2018
Here's What you'll Learn

Web designing is an interesting fact, nowadays people are more attracted to visually appealed websites for online surfing. It is obvious if we concentrate on every little detail of a web page or any design. So beginners, let us learn how to align both image and content in two-column div.

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.

Start new project