I've been struggling to prevent text from wrapping around an image on my webpage. Despite various attempts like enclosing the image and text in separate <div> elements, setting both the <img> and <div> to display as block, and even trying to insert a <br> tag between them, the text stubbornly remains aligned to the right side of the image and wraps around to the bottom. I really need it all to appear neatly underneath the image. What am I overlooking here?
Here is the complete content of the page:
@model web2.Models.User
<style>
.user-image-container {
height: unset;
display:block;
}
div {
display: block;
}
</style>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div>
<img src="/wapp2-smithe/Content/Images/Ethan Pic.jpg"
alt="An awesome picture of Ethan" class="user-image-container">
</div>
<br>
@using (Html.BeginForm(FormMethod.Post))
{
<div>
<ul>
<li>First Name: @Model.FirstName </li>
<li>Last Name: @Model.LastName </li>
<li>Email Address: @Model.Email </li>
</ul>
</div>
<div class="section">
<button type="submit" value="more" name="btnMore" id="More">
<i class="far fa-info-circle" ?></i></button>
<button type="submit" value="close" name="btnClose" id="Close">
<i class="fa fa-times"></i></button>
</div>
}
.user-image-container {
height: unset;
display: block;
}
div {
display: block;
}<h2>Index</h2>
<div>
<img src="https://via.placeholder.com/100" alt="An awesome picture of Ethan" class="user-image-container">
</div>
<br>
<div>
<ul>
<li>First Name: @Model.FirstName </li>
<li>Last Name: @Model.LastName </li>
<li>Email Address: @Model.Email </li>
</ul>
</div>
<div class="section">
<button type="submit" value="more" name="btnMore" id="More"><i class="far fa-info-circle" ?></i>More</button>
<button type="submit" value="close" name="btnClose" id="Close"><i class="fa fa-times"></i>Close</button>
</div>