I am trying to align text and image right next to each other horizontally but the part the image always gets out of span

Question

I am trying to put image at right of the text but it always get cropped out of the container html/css is:

body {
  background-color: #1e4bdd;
  background: linear-gradient(105deg, #f2eeee, #0808d4);
}

.container {
  text-align: justify;
  background-color: #ffffff;
  font-size: 16px;
  padding: 01.5em 1.8em;
  width: 90vw;
  max-width: 100em;
  position: relative;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  border-radius: 0.6em;
  background: linear-gradient(55deg, #940ce9, #a88bc9);
}

.image {
  border-radius: 50%;
  border: #1e4bdd;
  float: center;
}

<div class="seacrh">
  <h2> Meal app by Garvit <img class="image" src="heading.jpg" width="150" height="150"></h2>

  <input type="text" placeholder="Type A NOM NOM Dish.." class="inputBox" />
  <button class="inputBtn">Search</button>
</div>

So basically, it gets cropped out of the container. i don't understand why. I tried floating too, but it did not work.

Seems like the container is the problem, not sure what you were trying to achieve using the transform and the top/left 50%. Remove those, and the image is not going to be cropped. Also, center is not a valid value for float — Marcelo Origoni, Jul 29 '23 at 23:09

score 0 · Answer 1 · answered Jul 29 '23 at 23:47

The HTML and CSS that you provided don't match. You have <div class="seacrh"> and .container {}. I am going to assume that this should be the same class name and I'll use the correct spelling of "search".

As already commented, the cropping is due to the positioning declarations. This is how it looks without that:

body {
  background-color: #1e4bdd;
  background: linear-gradient(105deg, #f2eeee, #0808d4);
}

.search {
  text-align: justify;
  background-color: #ffffff;
  font-size: 16px;
  padding: 01.5em 1.8em;
  width: 90vw;
  max-width: 100em;
  /* position: relative; */
  /* transform: translate(-50%, -50%); */
  /* left: 50%; */
  /* top: 50%; */
  border-radius: 0.6em;
  background: linear-gradient(55deg, #940ce9, #a88bc9);
}

.image {
  border-radius: 50%;
  border: #1e4bdd;
  /* float: center; */
}

<div class="search">
  <h2> Meal app by Garvit <img class="image" src="//picsum.photos/150" width="150" height="150"></h2>

  <input type="text" placeholder="Type A NOM NOM Dish.." class="inputBox" />
  <button class="inputBtn">Search</button>
</div>

This example suggests using flexbox to position the image next to the heading and search box. By nesting the header and search box in a div, that div and the image can be positioned side-by-side.

body {
  background-color: #1e4bdd;
  background: linear-gradient(105deg, #f2eeee, #0808d4);
}

.seacrh {
  display: flex;
  align-items: center;
  /* text-align: justify; */
  background-color: #ffffff;
  font-size: 16px;
  padding: 01.5em 1.8em;
  width: 90vw;
  max-width: 100em;
  /* position: relative; */
  /* transform: translate(-50%, -50%); */
  /* left: 50%; */
  /* top: 50%; */
  border-radius: 0.6em;
  background: linear-gradient(55deg, #940ce9, #a88bc9);
}

.image {
  border-radius: 50%;
  border: #1e4bdd;
  /* float: center; */
}

<div class="seacrh">
  <div>
    <h2> Meal app by Garvit</h2>
    <input type="text" placeholder="Type A NOM NOM Dish.." class="inputBox" />
    <button class="inputBtn">Search</button>
  </div>
  <img class="image" src="//picsum.photos/150" width="150" height="150">
</div>

HarrY · Accepted Answer · 2023-07-30T09:15:31.770

-1

You can replace your code with this. And it should work. I have included two css classes header-titles & header-image

<div class="seacrh">
    <h2 class="header-titles"> Meal app by Garvit </h2>
    <img class="header-image" src = "heading.jpg" width="150" height="150">
    <input type="text" placeholder="Type A NOM NOM Dish.." class="inputBox"/>
    <button class="inputBtn">Search</button>
</div>

And here are those two css classes.

.header-titles{
  width:50%;
  text-align: left;
  float: left;
}
.header-image{
  float: left;
}

edited Jul 30 '23 at 09:15

answered Jul 29 '23 at 18:14

HarrY

607
4
14

the header image will be stretched to 50% width. Also, text-align affects the alignment of the content and an img tag cannot have content. This will definitely not work as OP expects – Marcelo Origoni Jul 29 '23 at 23:48

I am trying to align text and image right next to each other horizontally but the part the image always gets out of span

2 Answers2