How to Align Two Div’s Horizontally using HTML ?
Last Updated :
24 Jun, 2024
In this article, we will learn about aligning 2 divs beside each other in HTML. The <div> tag is a block-level element i.e. it always starts on a new line and takes all the width available to both left and right sides. It also has a top and a bottom margin. The <div> tag is used to separate a block of content or to define a section in HTML. The main use of <div> tag is as a container for HTML elements. It makes the use of CSS and JavaScript on these elements easier. Class and id attributes can be used with these tags.
Problem
Since <div> tag is a block element, only one div can be placed in a line, and all the space to the left and right is taken by it. Let’s look at the below example to understand it better.
Example: This is the basic example to showcase that the below tags are inline and all the spaces right to it are blank.
HTML
<!DOCTYPE html>
<html>
<body>
<a>Click here!</a>
<a>This is a link</a>
</body>
</html>
Output:
Here, 2 anchor tags are used. Since the anchor tag is an inline element, the second link comes right after the first one in the output. However, the second link can be made to go to the next line if we use the <div> tag. This is illustrated by the below example:
Example: This is the basic example to showcase that the below tags are inline but now using block element with it.
HTML
<!DOCTYPE html>
<html>
<body>
<a>Click here!</a>
<div><a>This is a link</a></div>
</body>
</html>
Output:
It is clearly visible that the use of the <div> tag took the second link on the other line because it acquires the entire line width. If <div> was an inline tag, then by default two divs would align horizontally.Their are Ways to align 2 divs horizontally as:
Using a global class for both the div
We can put both the divs in one parent div with a class attribute. The class attribute value will be used to style the divs. In the example, both the div tags are enclosed inside another <div> tag which has the class main. This is then used in the <head> section, inside the <style> tag. The CSS float property specifies the position of an element.
Syntax:
float: left | right | initial | inherit | none;
Attribute values:
Attribute Values
| Description
|
|---|
none
| It is the default value of a float property. The element must not float.
|
|---|
inherit
| The property must be inherited from its parent element.
|
|---|
left
| It places an element on its container’s right.
|
|---|
right
| It places an element on its container’s left.
|
|---|
initial
| This property is set to its default value.
|
|---|
Note : The CSS clear property specifies the flow of an element next to a floated element. The default value of clear is none.
clear: none ;
Example: In this example, we will see the alignment of two divs with help of float property.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.main div {
float: left;
clear: none;
}
</style>
</head>
<body>
<div class="main">
<div>
<p>1.</p>
<p>2.</p>
<p>3.</p>
</div>
<div>
<p>GeeksforGeeks</p>
<p>Geeks Portal</p>
<p>Writing Portal</p>
</div>
</div>
</body>
</html>
Output:
Using flex property
The flex property in CSS is the combination of flex-grow, flex-shrink, and flex-basis properties. It is used to set the length of flexible items. The flex property is much more responsive and mobile-friendly. It is easy to position child elements and the main container. The margin doesn’t collapse with the content margins. The order of any element can be easily changed without editing the HTML section. We can combine with a parent div class, and CSS flex property can be used to align two divs next to each other.
The CSS flex property is used to set a flexible length for flexible elements.
Syntax:
flex: flex-grow flex-shrink flex-basis|initial|auto|inherit;
Property Values:
Property Values
| Description
|
|---|
flex-grow
| A number that specifies how many items will grow relative to the rest of the flexible items.
|
|---|
flex-shrink
| A number that specifies how many items will shrink relative to the rest of the flexible items.
|
|---|
flex-basis
| It sets the length of items. Legal values of flex-basis are: auto, inherit, or a number followed by %, em, px, or any other length unit.
|
|---|
Example: In this example, we have used a display property whose value is set to flex which is used to set the length of flexible items.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.main {
display: flex;
}
</style>
</head>
<head>
<div class="main">
<div>
<p>1.</p>
<p>2.</p>
<p>3.</p>
</div>
<div>
<p>GeeksforGeeks</p>
<p>Geeks Portal</p>
<p>Writing Portal</p>
</div>
</div>
</head>
</html>
Output:
Individual styling of divs:
The two <div> tags can also be individually styled using the style property.
Example: In this example, we will see the implementation of divs by styling it with CSS.
HTML
<!DOCTYPE html>
<html>
<body>
<div style="float: left; width: 50%">
<p>1.</p>
<p>2.</p>
<p>3.</p>
</div>
<div style="float: right; width: 50%">
<p>GeeksforGeeks</p>
<p>Geeks Portal</p>
<p>Writing Portal</p>
</div>
</body>
</html>
Output: The first <div> tag is floated to the left and the second <div> tag is floated to the right. However, they are aligned to each other horizontally with a lot of space. The width can be changed for changing this space.
Similar Reads
How to Align a Div to Middle (horizontally/width) of Page using CSS ?
We are going to see how we can align a div horizontally using CSS. Centering content both vertically and horizontally is one of the most important functions that needs to be done. Here horizontally align refers to the same amount of space to the left and right of the div inside the parent div. Three
5 min read
How to horizontally center a div using CSS ?
To make an HTML div center horizontally using CSS is quite easy. We can horizontally center any element using the below-mentioned approaches. Before centering a div horizontally we need to create a fixed-size div. We have given a border to the div so the centering of that div can be visible. Set the
2 min read
How to specify the alignment of the Horizontal rule using HTML5 ?
As we know that the HTML <hr> tag is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections. Approach: The task is to specify the alignment of <hr> element in HTML. This can be done by using the align attribute of <hr> tag in HT
1 min read
How to create Horizontal Scroll Snap Using HTML and CSS ?
In this project, we are going to create a simple Horizontal Scroll Snap by using HTML and CSS only. Glimpse of Project Approach: The best way to animate the HTML objects is by using CSS classes and by setting the transitions at different stages. HTML code:Create an HTML file (index.html).Link the CS
2 min read
How to add horizontal line in HTML ?
Creating a visually appealing and well-structured webpage often involves the use of horizontal lines. These lines help separate different sections of content, making it easier for users to read and understand the information presented. In this guide, we’ll explore two effective methods to add horizo
3 min read
How to horizontal align text content into center in HTML ?
In this article, we will align the text content into center using HTML. We use align="center" attribute to set the text content into center. Syntax: <element_name align="center"> Contents... <element_name> The align="center" attribute is used to set the text content into center. Example
1 min read
How to Create Scrollable Horizontal Menu using CSS ?
The scrollable horizontal menu is suitable for various screen sizes. To create a scrollable horizontal menu using CSS, you can make use of the overflow property on a container. Syntax white-space: nowrapoverflow: auto;[GFGTABS] HTML <!DOCTYPE html> <html> <head> <style> div.s
1 min read
How to Align Items to End Position using CSS ?
To align elements to the end, you can use the CSS property justify-content: flex-end; in a flexbox container, and for aligning elements to the end vertically, you can use the CSS property align-items: flex-end; in a flexbox container. This property aligns the flex items along the cross-axis (vertica
2 min read
Make a Div Horizontally Scrollable using CSS
Here are two different methods to make the div horizontal scrollable using CSS. 1. Using overflow-x and overflow-y PropertiesFor a horizontal scrollable bar, we can use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; which will automatically hide the vertical scroll bar and prese
2 min read
How to create horizontal scrollable sections using CSS ?
In this article, we will see how we can create a horizontal scrollable section using CSS. We are going to make different sections and make them horizontally scrollable using CSS. HTML code is used to create the basic structure of the sections and CSS code is used to set the style. HTML Code: In this
3 min read