In my HTML code, I have a div container named row3red3. Inside this container, there are two divs: left (.row3red3slika) and right (.row3red3info).
I am facing an issue where I cannot position the right div .row3red3info on top, inline after the image.
I attempted to set the width for .row3red3slika but it does not seem to be working. I suspect there is a problem with the width of the row3red3slika.
Below is the HTML and CSS code:
<div class="row3red3">
<div class"row3red3slika">
<img src="img/slika2.jpg" alt="Slika2" height="150px" width="215px">
<div class="imgtext1">
<span><i class="fa fa-university"></i></span>
</div>
<div class="imgtext2">
<span>PORTSAID EGYPT</span>
</div>
</div>
<div class="row3red3info">
<span>text</span>
</div>
</div>.row3red3{
width:900px;
padding-left: 15px;
padding-top: 15px;
}
.row3red3slika{
width:215px;
height:150px;
}
.row3red3 .imgtext1{
display:inline-block;
position: relative;
background-color:#3E6373;
color:white;
margin-top: 95px;
margin-left:10px;
padding: 4px;
}
.row3red3 .imgtext2{
display:inline-block;
position: relative;
font-size: 14px;
background-color:#3E6373;
color:white;
font-family: 'Roboto Condensed', sans-serif;
margin-top: 60px;
padding: 4px;
}
.row3red3 img{
position: absolute;
display:inline-block;
vertical-align: top;
}
.row3red3info{
font-size:20px;
}