I am facing an issue with a figure containing an image that floats to the right, along with a div element.
Here is my HTML structure:
<div>
<figure id="fig">
<img src="img.jpg"></img>
<figcaption>Caption</figcaption>
</figure>
<div id="inner">
Blah Blah Blah
</div>
</div>
The CSS for my div element is as follows:
#inner{
text-align: center;
width: 70%;
margin: auto;
padding: 1% 5%;
}
For the figure element, I have the following CSS:
#fig{
width:162px;
height:277px;
margin:auto 7px auto 7px;
float:right;
}
And for the img element, the CSS is:
img{
width:162px;
height:277px;
}
The issue arises when the div is positioned below the figure. The problem occurs because the div's width is set to 70% and it does not adjust when the figure overlaps. I need the div to take up 70% of the space, excluding the area covered by the figure.