Search code examples
htmlcssrazorviewpage

Get an image to the right hand side of my information

I have been trying to put an image on the right-hand side of my information being displayed.

Example:

enter image description here

I keep getting the image to end up in between, below, or above the data. I just cannot figure out how to get it to run alongside. I tried to do align right etc. but it still does not seem to work. I know it is a large image that I need to resize. That is not an issue, it is getting it to the right of the information!

Here is my code:

<div class="card shadow p-4 mt-4">

  <div>
    <a asp-action="CreateAppointment" asp-route-id="@Model.Id" class="btn btn-success"> Create Appointment </a>
    <!-- add navigation link to Details action, passing the correct route id parameter -->
    <a class="btn btn-secondary" asp-controller="Patient" asp-action="Edit" [email protected]>Edit</a>
    <!-- add navigation link to Delete action, passing the correct route id parameter -->
    <a class="btn btn-danger" asp-controller="Patient" asp-action="Delete" [email protected]>Delete</a>
  </div>

  <br />

  <dl class="row">
    <dt class="col-sm-2">
      @Html.DisplayNameFor(model => model.Title)
    </dt>
    <dd class="col-sm-10">
      @Html.DisplayFor(model => model.Title)
    </dd>
    <dt class="col-sm-2">
      @Html.DisplayNameFor(model => model.Name)
    </dt>
    <dd class="col-sm-10">
      @Html.DisplayFor(model => model.Name)
    </dd>
    <dt class="col-sm-2">
      @Html.DisplayNameFor(model => model.Gender)
    </dt>
    <dd class="col-sm-10">
      @Html.DisplayFor(model => model.Gender)
    </dd>
    <dt class="col-sm-2">
      @Html.DisplayNameFor(model => model.MedicalNumber)
    </dt>
    <dd class="col-sm-10">
      @Html.DisplayFor(model => model.MedicalNumber)
    </dd>
    <dt class="col-sm-2">
      @Html.DisplayNameFor(model => model.DateOfBirth)
    </dt>
    <dd class="col-sm-10">
      @Html.DisplayFor(model => model.DateOfBirth)
    </dd>
    <dt class="col-sm-2">
      @Html.DisplayNameFor(model => model.EmailAddress)
    </dt>
    <dd class="col-sm-10">
      @Html.DisplayFor(model => model.EmailAddress)
    </dd>
    <dt class="col-sm-2">
      @Html.DisplayNameFor(model => model.PhoneNumber)
    </dt>
    <dd class="col-sm-10">
      @Html.DisplayFor(model => model.PhoneNumber)
    </dd>
    <dt class="col-sm-2">
      @Html.DisplayNameFor(model => model.Address)
    </dt>
    <dd class="col-sm-10">
      @Html.DisplayFor(model => model.Address)
    </dd>
  </dl>
</div>

The code I am trying to get to work:

<div>
  <img src="~/css/Images/logo.jpeg" class="img-fluid" align="right">
</div>
Solution

  • You just need to wrap your data div with buttons and list with a div and put the image as sibling as that div, after, the .card div should be set as display:flex;

    Check:

    div{
  border:1px dotted black;
  margin:1em;
}
.flex-div{
  
  display:flex;
  flex-direction:row;

}
    <div class="normal">
  <div>Your normal div</div>
  <div>Your image div</div>
</div>

<div class="flex-div">
  <div>Your normal div</div>
  <div>Your image div</div>
</div>