What I currently have is like this...
https://i.stack.imgur.com/7FeSi.png
However, this is what I am aiming for.
https://i.stack.imgur.com/fn9m0.png
The image dimensions are set up as follows...
#content img{
padding: 3%;
width: 60%;
height: 50%;
float: left;
}
I'm using %s to ensure responsiveness. Therefore, the exact height of the image in pixels is uncertain.
Trying to apply the same height and width configuration to the gray box only ends up filling it with text, as seen above.
#text{
padding: 3%;
margin-right: 3%;
margin-top: 3%;
width: 37%;
height: 50%;
float: left;
background-color: #333333;
color: #FFFFFF;
}
Any suggestions on how to solve this issue? Perhaps my approach to making it responsive is incorrect.
Thank you for your help.
UPDATE: This is the HTML code used...
<div id="content">
<img src="projectphotos/1.jpg">
<span class="arrows" style="float: right;"><i class="fa fa-angle-`double-right fa-3x"></i></span>`
<div id="text">
Test
</div>
</div>