Add div on html & css next to other div - html

Question

I want to add three divs in the same line, but when I add the second div it's displayed below the first div. I don't know how to fix this problem.
.fisrt-div {
background-color: rgb(65, 65, 65);
width: 25%;
margin-left: 20%;
margin-top: 10%;
border-radius: 10px;
width: 20%;
height: 30%;
cursor: pointer;
}
.second-div {
background-color: rgb(65, 65, 65);
width: 25%;
margin-left: 60%;
float: left;
margin-top: 10%;
border-radius: 10px;
width: 20%;
height: 30%;
cursor: pointer;
}
<div class="first-div">
<img class="img1" src="images/androiddev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttext</b><br><br>
<a style="text-decoration: none; color: turquoise; margin-left: 50%; font-size: 17px;" href="">blahblahblah</a></b>
</p>
</div>
<div class="second-div">
<img class="img2" src="images/webdev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttexttexttexttext</b></p>
<a href="" style="text-decoration: none; color: turquoise; margin-left: 50%; font-size:
17px;">blahblahblah</a>
</div>

Answer 1

You have multiple errors :
Class name .first-div not .fisrt-div .
Property widthis duplicated.
If you want to add div's in the same line, use Display:inline-block. [I prefer to do it with flexbox or grid, read more about this]
I have noticed that you put margin-left: 50%; on a style, I think you want to center it, just put Display:block and text-align:center to the a or span styles.
float: left; is not necessary here.
You put a very long text inside b, that's why I used overflow-wrap: break-word; to break text.
.first-div {
background-color: rgb(65, 65, 65);
width: 25%;
border-radius: 10px;
height: 30%;
cursor: pointer;
display:inline-block;
overflow-wrap: break-word;
}
.second-div {
background-color: rgb(65, 65, 65);
width: 25%;
border-radius: 10px;
height: 30%;
cursor: pointer;
display:inline-block;
overflow-wrap: break-word;
}
<div class="first-div">
<img class="img1" src="images/androiddev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttext</b><br><br>
<a style="text-decoration: none; color: turquoise; text-align:center; font-size: 17px; display: block;" href="">blahblahblah</a></b>
</p>
</div>
<div class="second-div">
<img class="img2" src="images/webdev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttexttexttexttext</b></p>
blahblahblah
</div>

Answer 2

The name of your class is written wrong, on the css file.
.fisrt-div

Answer 3

i dont actually get what you're trying to achieve but i hope this helps you.
i removed the float: left
then added display inline-block in css
.fisrt-div {
background-color: rgb(65, 65, 65);
width: 25%;
margin-top: 10%;
border-radius: 10px;
width: 20%;
height: 30%;
cursor: pointer;
}
.second-div {
background-color: rgb(65, 65, 65);
width: 25%;
margin-top: 10%;
border-radius: 10px;
width: 20%;
height: 30%;
cursor: pointer;
}
.third-div {
background-color: rgb(65, 65, 65);
width: 25%;
margin-top: 10%;
border-radius: 10px;
width: 20%;
height: 30%;
cursor: pointer;
}
.first-div, .second-div, .third-div{
display: inline-block;
}
<div class="first-div">
<img class="img1" src="images/androiddev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttext</b><br><br>
<a style="text-decoration: none; color: turquoise; margin-left: 50%; font-size: 17px;" href="">blahblahblah</a></b>
</p>
</div>
<div class="second-div">
<img class="img2" src="images/webdev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttexttexttexttext</b></p>
<a href="" style="text-decoration: none; color: turquoise; margin-left: 50%; font-size:
17px;">blahblahblah</a>
</div>
<div class="third-div">
<img class="img2" src="images/webdev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttexttexttexttext</b></p>
<a href="" style="text-decoration: none; color: turquoise; margin-left: 50%; font-size:
17px;">blahblahblah</a>
</div>

Answer 4

Make one class for both divs then add the following css
div {
background-color: rgb(65, 65, 65);
margin-left: 20px;
margin-top: 20px;
border-radius: 10px;
width: 210px;
height: 100px;
cursor: pointer;
display: inline-block;
}
If you want the words to wrap use word-wrap: break-word;.
If you want both boxes to be the same width, but don' need them to be the same height, make the height: auto.
If you want the boxes to have the same height but don't care about width, make the width: auto.

Answer 5

<div class="main">
<div class="first-div">
<img class="img1" src="images/androiddev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttext</b><br><br>
<a style="text-decoration: none; color: turquoise; margin-left: 50%; font-size: 17px;" href="">blahblahblah</a>
</p>
</div>
<div class="second-div">
<img class="img2" src="images/webdev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttexttexttexttext</b></p>
<a href="" style="text-decoration: none; color: turquoise; margin-left: 50%; font-size:
17px;">blahblahblah</a>
</div>
.main{
display:flex;
flex-wrap:wrap;
}
.fisrt-div {
background-color: rgb(65, 65, 65);
width: 33.33%;
margin-left: 20%;
margin-top: 10%;
border-radius: 10px;
height: 30%;
cursor: pointer;
}
.second-div {
background-color: rgb(65, 65, 65);
width: 33.33%;
margin-top: 10%;
border-radius: 10px;
height: 30%;
cursor: pointer;
}
<div class="main">
<div class="first-div">
<img class="img1" src="images/androiddev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttext</b><br><br>
<a style="text-decoration: none; color: turquoise; margin-left: 50%; font-size: 17px;" href="">blahblahblah</a>
</p>
</div>
<div class="second-div">
<img class="img2" src="images/webdev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttexttexttexttext</b></p>
<a href="" style="text-decoration: none; color: turquoise; margin-left: 50%; font-size:
17px;">blahblahblah</a>
</div>
<script type="text/javascript">
</script>
<div class="as-console-wrapper"><div class="as-console"></div></div>
</div>