How To Align Text Side By Side In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Riya
In this tutorial we will show you how to align text side by side in html, it’s a type of problem that mostly occur and a designer when begin to start coding, face this type of problem genuinely. Here, at this time no one knows how to align text side by side.
So, an attribute float is used here and the value given to float is left, right and according to editor’s choice. The easy way to use the float attribute is with its CSS properties like margin, display and flex, etc.
Step By Step Guide On How To Align Text Side By Side In HTML :-
1. By using float: left property:
As we know, float is used to align text side by side. First, we use here left value of float and understand what we can do to solve this problem without any additional CSS property here without margin.
So, that we can see that what’s happen next. Also, we can use two or more div tags to see how it is working.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
<div style="float: left; margin: 40px ;">
This is the left paragraph using left float.
</div>
<div style="float: left; margin: 40px ;">
This is the right paragraph using left float.
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Now, we use here two div tags with same attributes and values but different content to see how text aligns, margin is used here to facilitate a small amount of area between them to see differences between div tags.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
2. By using both left and right properties:
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
<div style="float:left;margin: 40px;">
This is the left paragraph using left float.
</div>
<div style="float: right;margin: 40px;">
This is the right paragraph using right float.
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Now here, we use same two div tags but one with float: left property and another with float: right property. By using this type of code it helps us to align text at edges like first div at left side as defined in property and another at right side, same as defined in property.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
From this, we found that float attribute is used to align text side by side. In this tag if we write float: left , then all the text goes align side by side, but if somewhere right is defined as value the text aligns to right side. I hope this tutorial on how to align text side by side in html helps you.
About Riya
