Seeking guidance on CSS and HTML, specifically relating to an article template I'm developing. The challenge lies in incorporating a picture on one side and a text box of equal height on the opposite side, both enclosed within div tags as shown below.
<!--begin article-->
<div id="article">
<div id="article_header">
Title goes here
</div>
<div id="article_body">
<!-- begin text. used for actual text of article-->
<div id="text">
Text Goes here
</div>
<!-- end text-->
<!-- begin article media. used for pictures -->
<div id="article_media">
<img src="source_goes_here" alt="This is an image!">
</div>
</div>
</div>
The provided CSS...
#article{
border:1px solid gold;
margin-bottom:20px;
}
#article_header{
padding:5px;
font-family:arial;
font-size:36px;
font-style:bold;
color:white;
background:url('orangegradiant.png');
}
#article_body{
padding:5px;
display:inline-block;
width:auto;
}
#article_media{
border: 1px solid pink;
text-align:center;
display:block;
width:48%;
height:48%;
}
#text{
display:block;
width:51%;
float:right;
}
After experimenting with different approaches, I've hit a roadblock. While using the float property seems to have set the layout, I'm struggling to make the image div dynamically adjust its size while causing the text div to adapt accordingly. Is there a way to limit the image size so it doesn't exceed 50% of the div, preventing any distortion due to oversized images?
Your assistance is highly valued!
P.S. Please excuse any formatting errors in the code. Still ironing out the kinks on my end.