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.

Leave Your Phone No
and we will contact you for details about your project.

Let’s talk about your project
Get a free, tailor-made project estimation in a business day
