How to align two div’s horizontally using HTML ?
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
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:
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 <style> tag. The CSS float property specifies the position of an element.
- 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.
2. Using flex property: The flex property in CSS is the combination of flex-grow, flex-shrink, and flex-basis property. It is used to set the length of flexible items. The flex property is much responsive and mobile-friendly. It is easy to positioning 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, 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.
flex: flex-grow flex-shrink flex-basis|initial|auto|inherit;
- 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.
3. Individual styling of divs: The two <div> tags can also be individually styled using style property.
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.