How to align two div’s horizontally using HTML ?
Last Updated :
04 May, 2023
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 enables the use of CSS and JavaScript on these elements easier. Class and id attributes can be used with these tags.
The problem of aligning 2 divs horizontally: 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: Here is the demonstration of the above explanation.
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: Here is the demonstration of the above explanation
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.
Ways to align 2 divs horizontally: We have two divs that can be aligned horizontally with the use of CSS. There are several ways to perform this task. We will understand all the concepts in a sequence.
1. Using a global class for both the divs: 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:
- none: It is the default value of a float property. The element must not float.
- inherit: property must be inherited from its parent element.
- left: Place an element on its container’s right.
- right: Place an element on its container’s left.
- initial: Property is set to its default value.
The CSS clear property specifies the flow of an element next to a floated element. The default value of clear is none.
Syntax:
clear: none;
Example: Here is the demonstration of the above explanation
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:
2. 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:
- 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:
3. Individual styling of divs: The two <div> tags can also be individually styled using the style property.
Example: Here we are using the above approach.
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...