CODEWITHSUNDEEP
htmlcssword-wrap
Ethan Malloy
Ethan Malloy

Reputation: 744

How to stop text from wrapping around an image?

I need to stop text from wrapping around an image. No matter what I try, the text shows up on the right side of the image and wraps around to the bottom. It needs to be all under the image. I've tried putting the image and the text in separate <div>, tried setting both the <img> and <div> as display: block, tried putting a <br> between the image and the text, and none of it worked. The text stays where it is. What am I missing?

This is the entire 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>

Upvotes: 1

Views: 954

Answers (1)

Iliass Akkara
Iliass Akkara

Reputation: 671

I've found the issue. The "float: left" (css style) on the img was causing the problem. The way I found out was simply by checking each and every style attribute in your css by turning it on and off. So, delete the float: left line in your css and the problem will be fixed.

enter image description here

P.S. I like your site project :).

Upvotes: 2

Related Questions