How to align HTML dev tags in Horizontally (in a same line) using CSS
The following image will describe the scenario what i am going to explain further
use the following code to create the above scenario using CSS and HTML
</pre>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container
{
float: left;
clear: none;
height : 140px;
width : 720px;
background-color:yellow;
}
.left
{
height : 100px;
width : 200px;
background-color:blue;
float: left;
clear: none;
text-align:center;
margin:20px;
}
.middle
{
height : 100px;
width : 200px;
background-color:green;
float: left;
clear: none;
text-align:center;
margin:20px;
}
.right
{
height : 100px;
width : 200px;
background-color:red;
float: left;
clear: none;
text-align:center;
margin:20px;
}
</style>
</head>
<body>
<div>
<div> left</div>
<div> middle</div>
<div>rght</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>Visit for more : https://futuredev.info/ </p>
</body>
</html>
<pre>
Bootsrap 3 correct CSS Media Queries break points
How to select colors to a design (Best Practices)
CSS Sprites (How to manage your all web images using one image with CSS)
About Author
Rangana Dissanayake
Working as a lead consultant(software) at well reputed IT company in Sri Lanka, I have been involved in UID, UXD, graphic design, website design & development, eCommerce and WordPress for over 10 years. I'm proficient with React JS, Angular, Node JS, Java Script, HTML5, CSS3, Responsive Web Design, Adobe CC and PHP. I also specialize in all forms of digital marketing including SEO, AdSense, Affiliate marketing and blogging.