Get an image to the right hand side of my information

Question

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

Example:

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" asp-route-id=@Model.Id>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" asp-route-id=@Model.Id>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>

It looks like you're using Bootstrap for your layout, why not just make another column to the right of the details and place your image there? — Chris, Jul 28 '21 at 20:18

score 1 · Accepted Answer · answered Jul 28 '21 at 20:19

1

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>

answered Jul 28 '21 at 20:19

Hoch

510
4
15

I am sorry I do not understand. I am a beginner coder and my head is frustrated with this at the moment – user450157 Jul 28 '21 at 20:28
1

No problem, we have a property called display, it's specifies the display behavior of an element. So, when you want to hide an element, you put display:none.. So, we have the flex property, you can check a good post here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ But, it's seems you are using bootstrap, so just add some columns to the layout, as you have made with dd,dt,dl: https://getbootstrap.com/docs/4.4/layout/grid/ – Hoch Jul 28 '21 at 20:35
I looked at bootstrap documentation but it still does not make sense to me. I know this is probably easy to solve, but I have spent two hours trying things. Inside the dl I created a new one and the image will not move to the right either – user450157 Jul 28 '21 at 20:55
hmm.. You can see the first sample from bootstrap's grid page, it have `container > row > 3 * col-sm`, and this create 3 columns, try to adapt it ^^ – Hoch Jul 28 '21 at 23:08

Get an image to the right hand side of my information

1 Answers1