Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to align two divs horizontally in HTML?
The division tag name itself indicates that it makes divisions, and displays layouts in web pages. The DIV tag can be applied to text, images, navigation bar etc., where a separate section can be created.
This tag consists of open and close tags <DIV> </DIV>, and both the tags are used together if we want to divide the page.
The content can be any type of data or images. DIV tags can be styled with CSS or manipulated with JavaScript, it is easily styled by using the class or id attributes.
The DIV tag is called as block-level element, that means it starts on a new line by considering the width available to both left and right sides.
And it consists of bottom and top margin. The <div> tag is mainly called as a container for HTML elements. With the div tag the Class and id attributes are used.
Syntax
Following is the Syntax/usage of DIV tag −
<div> Content </div>
Example
Following example demonstrates how to align two DIV tags horizontally −
<!DOCTYPE html>
<html>
<head>
<title>HTML div Example</title>
</head>
<body>
<div style="width:150px;float:left;height:100px; background:lightgreen; margin:10px">
First BLOCK
</div>
<div style="width: 150px; float:left; height:100px; background:lightblue; margin:10px">
Second BLOCK
</div>
</body>
</html>
When we run the above code, two DIV elements with inline styles will be displayed side-by-side, with rectangular boxes with specific color and text specified inside them.
Align two DIVs horizontally in HTML
Using CSS, we can align two DIV tags horizontally in several ways, like −
By using global class for two DIVs
By using Flex property
Individual styling of DIVs
Let us try to understand each way of alignment in detail with an example −
Using global class for two DIVs
Place two DIV tags in a single parent DIV by using class attribute. The value of class attribute is used for styling the DIVs in CSS. We will use float property for positioning the element on a web page.
Syntax
Following the syntax/usage of float property −
Float: left | right | initial | inherit | none;
The above attribute values of float indicate the position of container.
Inherit that is used to inherit elements from its parent element, left is used to arrange to its right container, right is used to place the element to its left container, initial property is set to its default value.
Example
The following example demonstrates how to use global class for both div tags −
In the below program the two DIV tags are enclosed inside another div tag which is named with class global. It is called inside <style> tag. The float property in CSS mentions the position of an element.
<!DOCTYPE html>
<html>
<head>
<style>
.global div {
float: left;
clear: none;
}
</style>
</head>
<body>
<div class="global">
<div>
<p>i.</p>
<p>ii.</p>
<p>iii.</p>
</div>
<div>
<p><b>HTML5</b></p>
<p><b>Cascading Style Sheet</b></p>
<p><b>JavaScript</b></p>
</div>
</div>
</body>
</html>
When we run the above code, two div elements inside a parent div class “global” is created. The child div elements will be floated to the left, and text will be formatted accordingly.
Apply Flex property for DIV
This property is the combination of grow, shrink and basis in CSS. Generally, it is used to manage the length of flexible things. It is mobile friendly and it is easy to arrange the main container and child elements.
Flex property is very responsive. Without editing the HTML section, the order of elements can easily change. So, using CSS flex, we can align two DIVs next to each other.
Syntax
Following the syntax or usage of flex property −
flex: flex-basis flex-grow flex-shrink | initial | auto| inherit;
The above flex property is used to set the flexible length to elements, the attribute values of −
Flex-basis is used to set length of items, the values are inheriting, auto or any number followed with % em, px, or length unit.
Flex-grow specifies a number indicating should grow, compared to the remaining flexible items in a flex container.
Flex-shrink indicates a number, that specifies number of items that will shrink based on the remaining flexible items.
Example
Following example demonstrates how flex property sets the length of flexible items −
<!DOCTYPE html>
<html>
<head>
<style>
.global {
display: flex;
}
</style>
</head>
<body>
<div class="global">
<div>
<p>i.</p>
<p>ii.</p>
<p>iii.</p>
</div>
<div>
<p><b>HTML5</b></p>
<p><b>Cascading Style Sheet</b></p>
<p><b>JavaScript</b></p>
</div>
</div>
</body>
</html>
When we run the above code, a parent div element(global) and two child div elements inside parent element are displayed. The text specified in the child elements will be formatted accordingly.
Using Individual Styling for div tags
By using style property, both div tags can be individually styled.
Syntax
Following is the syntax for styling the individual div elements −
<div style="float: left| right| inherit ; width: %”>
Example
Following example demonstrates how to style the individual DIVs −
<!DOCTYPE html>
<html>
<body>
<div style="float: right; width: 70%">
<p>i.</p>
<p>ii.</p>
<p>iii.</p>
</div>
<div style="float: left; width: 30%">
<p><b>HTML5</b></p>
<p><b>Cascading Style Sheet</b></p>
<p><b>JavaScript</b></p>
</div>
</body>
</html>
When we execute the above code, div tags are displayed horizontally - the first arranged div tag floated to right by 70% and second div tag floated to left by 30%.
Example
Consider another example by changing the style of individual DIV tags −
<!DOCTYPE html>
<html>
<body>
<div style="float: left; width: 50%">
<p>TutorialsPoint</p>
<p>HTML</p>
<p>Java</p>
<p>Oracle</p>
</div>
<div style="float: right; width: 50%">
<p><b>Website</b></p>
<p><b>Tutorials</b></p>
<p><b>Tutorials</b></p>
<p><b>Tutorials</b></p>
</div>
</body>
</html>
5K+ Views
To Continue Learning Please Login