How can I prevent an image from moving in relation to other objects on a webpage using HTML?

Question

How can I prevent an image from moving in relation to other objects on a webpage using HTML?

I'm currently working on my HTML website and facing a layout issue. I have an image in the center of the screen, but I want to add text beside it on the right side. Every time I try to do this, the image moves down, which is frustrating. I'm not sure how to fix it.

Here is the desired layout: https://i.sstatic.net/Yf3zB.jpg

The image on the left shows how I want the layout to be.

The slider is a slideshow for the pictures. The text I want to add should go under the "What I Do" block.

Current code:

    <div class="slider" id="main-slider">
        <div class="slider-wrapper">
            <img src="./img/hem.jpg" alt="First" class="slide" />
            <img src="./img/torslanda.png" alt="Second" class="slide" />
            <img src="./img/DSC_0032.JPG" alt="Third" class="slide" />
            <img src="./img/hem2.JPG" alt="Fourth" class="slide" />
        </div>
    </div>

html css

Answer 1

Answer №1

It appears that your markup is broken due to the unnecessary closing tag for the </br>. I recommend revising your HTML structure by properly closing all elements and organizing content into separate sections, such as the main section and sidebar. The sidebar content should be contained within the <aside> tag, while the main content remains inside its <section> container to allow for better text organization. Additionally, adjustments need to be made to the CSS properties of the slider, including width, margin, and padding.

/* Utilize the body element to set up a grid layout. */
body {
  display: grid;
  grid-template-columns: 8fr 4fr;
  grid-gap: 20px;
}

.dark {
  background: #444;
  color: #999;
}

#sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.slider {
  width: 100%;
  margin: 2em auto;
}

.slider-wrapper {
  width: 100%;
  min-height: 300px;
  position: relative;
}
...

<section id="main">
  <div class="container">
    <article id="main-col">
      <h1 class="page-title">About Me</h1>
      ...
    </article>

  </div>
</section>

<aside id="sidebar">
  <div class="dark">
    <h3>What I Do</h3>
    ...
  </div>

  <div>
    <h3>Additional Content </h3>
    ...
  </div>
</aside>

Answer 2

It appears that your markup is broken due to the unnecessary closing tag for the </br>. I recommend revising your HTML structure by properly closing all elements and organizing content into separate sections, such as the main section and sidebar. The sidebar content should be contained within the <aside> tag, while the main content remains inside its <section> container to allow for better text organization. Additionally, adjustments need to be made to the CSS properties of the slider, including width, margin, and padding.

/* Utilize the body element to set up a grid layout. */
body {
  display: grid;
  grid-template-columns: 8fr 4fr;
  grid-gap: 20px;
}

.dark {
  background: #444;
  color: #999;
}

#sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.slider {
  width: 100%;
  margin: 2em auto;
}

.slider-wrapper {
  width: 100%;
  min-height: 300px;
  position: relative;
}
...

<section id="main">
  <div class="container">
    <article id="main-col">
      <h1 class="page-title">About Me</h1>
      ...
    </article>

  </div>
</section>

<aside id="sidebar">
  <div class="dark">
    <h3>What I Do</h3>
    ...
  </div>

  <div>
    <h3>Additional Content </h3>
    ...
  </div>
</aside>

How can I prevent an image from moving in relation to other objects on a webpage using HTML?

Answer №1

Similar questions

Are the Bootstrap columns arranged in a vertical stack instead of side by side?

Tips for relocating a popup window''s position

Ensuring Consistent Vertical Spacing for CSS-Animated Bootstrap 5 Navbar Toggler Buttons in All Browsers

Ways to ensure a video completely fills the frame

Can I combine the col and d-flex classes in Bootstrap 5 without breaking any rules?

The Mobile Side Menu Is Not Scrollable

Dynamic Bootstrap Table with Fixed Header

Is IE8 compatible with HTML5 and CSS3?

Translate a portion of a painting by utilizing context.putImageData()

Is there a way to synchronize breakpoint values across different media queries?

Exploring the versatility of CSS variables in JavaFX

The initial item in the Materializecss slider is failing to display

Animate your SVG with CSS using hover effects that originate from the center of the SVG

Error: The code is unable to access the '0' property of an undefined variable, but it is functioning properly

When arriving on a page via an HTML anchor tag, the CSS style does not appear. How can I "reinstate" it?

Exploring the diversity of perspectives through Angular

Unable to connect HTML data to the view section using angular.js

Extracting information from an HTML table with Jsoup

Integrating XML API Requests Using HTML and JavaScript

The problem of Twitter Bootstrap 2 top navigation dropdown not functioning properly on mobile devices