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 place two divs next to each other in HTML?
DIV tag is nothing but a division tag, the name itself indicates that it makes divisions for the content on the web pages. It helps in separating the data like text, images, navigation bar etc., we can also create particular sections by using the DIV tag.
A DIV tag consists of open and close tags <DIV> </DIV>, and both these tags are compulsory if we want to divide the page.
DIV tags can be styled with CSS or manipulated with JavaScript, it is easily styled by using the class or id attribute. Any sort of data can be placed inside the <div> tag.
Example
Following is the example of the <DIV> tag −
<html>
<head>
<title>Tutorialspoint</title>
<style type=text/css>
p {
background-color:Red;
font-size: 35px;
margin: 8px;
}
div {
color: white;
background-color: Blue;
margin: 4px;
font-size: 25px;
}
</style>
</head>
<body>
<p>How to Represent Div Tags in HTML5</p>
<div>Welcome To TutorialsPoint</div>
<div>HTML Tutorial</div>
<div>CSS Tutorial</div>
</body>
</html>
When we run the above program, a webpage with a heading will be displayed with the text in white color “welcome to Tutorialspoint”, “HTML Tutorial” and “CSS Tutorial” respectively.
Placing two div tags next to each other in HTML
We already know that div tags are used for creating a layout of web pages. So, we can arrange the layout of webpages content in either side by side or up and down as desired using DIV tags.
Syntax
To arrange the content side by side the syntax is −
<style type=text/css>
.leftdivision
{
float: left;
}
.middledivision
{
float: left;
background-color:gray
}
.rightdivision
{
float: left;
}
div {
padding : 2%;
color: black;
background-color: pink;
width: 30%;
border: white;
}
</style>
In the above syntax float, the left indicates that the layout has to start from the left side of the web page.
Now let us see some examples to know more about DIV side by side
Example
Now let us see some examples to know more about DIV side by side −
<!DOCTYPE html>
<html>
<head>
<title>HTML div</title>
</head>
<body>
<div style="width: 100px; float:left; height:100px; background:gray; margin:10px">
First DIV
</div>
<div style="width: 100px; float:left; height:100px; background:yellow; margin:10px">
Second DIV
</div>
</body>
</html>
When we run the above code, we see two DIV tags, side-by-side, each with different background color and a specified text in them.
Example
Following is another example demonstrating how to place the DIV tags side by side −
<html>
<head>
<title>Tutorialspoint</title>
<style type=text/css>
.leftdivision
{
float: left;
}
.rightdivision
{
float: left;
background-color:gray
}
div {
padding : 5%;
color: black;
background-color: pink;
width: 30%;
border: solid black;
}
</style>
</head>
<body>
<div class="leftdivision">
<h1>HTML5</h1>
<p>HTML5 is hyper text markup language latest version, By using HTML we can create our own websites. It describes the structure of web pages.</p>
</div>
<div class="rightdivision">
<h1>Cascading Style Sheets</h1>
<p>CSS full form is Cascading Style Sheets, It helps in how HTML elements has to be displayed on screen, It controls the layouts of multiple web pages.</p>
</div>
</body>
</html>
When we execute the above code, two DIV tags will be displayed side-by-side with different background colors and specific text in it, but these DIV tags has height and width variations, when compared to the previous example.
45K+ Views
