CSS for Positioning Elements Side by Side Using Absolute Positioning

I'm having trouble figuring out how to position balloons like the ones shown in this image:

    <div class="red_frame">
    <img src="https://i.sstatic.net/54SMF.png"  class="r_over"/>
    <img src="https://i.sstatic.net/54SMF.png"  class="r_over"/>
        <img src="https://i.sstatic.net/54SMF.png"  class="r_over"/>
        <img src="https://i.sstatic.net/54SMF.png"  class="r_over"/>
        <img src="https://i.sstatic.net/54SMF.png"  class="r_over"/>
        <img src="https://i.sstatic.net/54SMF.png"  class="r_over"/>
        <img src="https://i.sstatic.net/54SMF.png"  class="r_over"/>
    </div>
.red_frame {
float: left;
width: 143px;
height: 346px;
margin: 0 2px 0 0;
position: relative;
}

.r_over
{position: relative;
right: 29px;}

Fiddle link http://jsfiddle.net/fddkdvn4/

htmlcss

Answer №1

You're really close to figuring it out on your own.

Experimenting with the position is a great strategy, but in this case, all you need is margin-left: -10px.

.red_frame {
      float: left;
      width: 143px;
      height: 346px;
      margin: 0 2px 0 0;
      position: relative;
    }
    .r_over {
      position: relative;
      right: 29px;
      margin-left: -10px;
    }
<div class="red_frame">
      <img src="https://i.sstatic.net/54SMF.png" class="r_over" />
      <img src="https://i.sstatic.net/54SMF.png" class="r_over" />
      <img src="https://i.sstatic.net/54SMF.png" class="r_over" />
      <img src="https://i.sstatic.net/54SMF.png" class="r_over" />
      <img src="https://i.sstatic.net/54SMF.png" class="r_over" />
      <img src="https://i.sstatic.net/54SMF.png" class="r_over" />
      <img src="https://i.sstatic.net/54SMF.png" class="r_over" />
    </div>

Answer №2

utilize

VIEW DEMO

Styling with CSS

.blue_border {
float: right;
width: 200px;
height: 400px;
margin: 0 5px 0 0;
position: relative;
}

.b_over
{margin-left:-20px;
}

Answer №3

Remove position:relative; and right:29px; from .r_over{}, then add margin-left: -10px;

Answer №4

To achieve this effect, consider using a negative margin along with the :not(:first-child) selector to ensure that only certain elements are affected.

Example:

.red_frame {
    width: 143px; height: 346px; margin: 8px;
}
.r_over:not(:first-child) {
    margin-left: -10px;
}
<div class="red_frame">
    <img src="https://i.sstatic.net/54SMF.png" class="r_over" />
    <img src="https://i.sstatic.net/54SMF.png" class="r_over" />
    <img src="https://i.sstatic.net/54SMF.png" class="r_over" />
    <img src="https://i.sstatic.net/54SMF.png" class="r_over" />
    <img src="https://i.sstatic.net/54SMF.png" class="r_over" />
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How come my CheerpJ web page displays the loading screen but fails to function properly?

I have recently started using CheerpJ and went through the getting started tutorial. Despite following all the steps, I encountered an issue where my webpage only displayed the CheerpJ loading screen (the rotating circle) without running my app. Can anyo ...

javahtmlswingcheerpj

Dynamic elements create an interactive horizontal scrolling experience

I have square elements that will be displayed in a row on the screen extension. These elements are generated dynamically, starting with 2 and going up to 50. Depending on the screen size and number of elements, there may be overflow. In such cases, I want ...

css

Generate a single-page PDF document mirroring the content of a website

I'm facing a dilemma. I need to generate a one-page PDF file without any gaps between the pages. Despite trying numerous plugins, add-ons, scripts, and software, all of them produce multiple pages. What I really require is to have all the pages in a s ...

phphtmlweb-services

Enhancing Animation Speed with jQuery

I've provided the code snippet at this link: http://jsfiddle.net/LnWRL/4/: Here is the HTML: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <div id="wrap_demo"> <div id="demo"></di ...

javascriptjqueryhtmlcss

Using canvas transformation changes the way drawImage is applied

I have been working on a game as a hobby and you can find it at . I have managed to get most aspects of the game working well, such as transformation, selection, movement, and objects. However, there is one particular challenge that I am struggling with. ...

javascripthtmlcanvas

How can I use jQuery to set the color of every other row in a

I'm facing an issue where I want to use jQuery to set the color of alternate rows in an HTML table. However, every time I add a new row, the color of the entire table switches. Below is the JavaScript code snippet that I am utilizing: var alternate = ...

javascriptjquerycsshtml-table

HTML: Learn how to concatenate the href attribute of an anchor tag instead of replacing it

I am currently on the page www.myUniqueWebsite.com/sign-up?type=explore In the navigation menu, there is a link to switch languages. <a href="?lang=es">Spanish</a> When I click on this link, it redirects me to www.myUniqueWebsite.com/ ...

html

Changing the .load function based on user input

Can I replace a .load text with one that can be updated by a user using form input or similar method? My goal is to create a code that retrieves data using unique div IDs (specific to each employee) containing information within tables across various HTML ...

javascriptjqueryhtmlforms

What is the process for closing the lightbox?

My code is supposed to display a lightbox as soon as the page loads, similar to a popup window. However, there seems to be an issue with closing the lightbox when clicking on the 'x' button at the corner of the box. Unfortunately, the current cod ...

javascripthtmlcsslightbox

The onclick handler fails to function following the injection of html using jquery AJAX

After using ajax to inject HTML into my page, the onclick handler on a specific part of that injected HTML does not seem to be functioning... Specifically, I am referring to this image... < img class="close_row" src="img/close.gif"/> In jQuery, I ...

jqueryhtmlajax

Customizing the layout of specific pages in NextJSIncorporating

In my Next.js project, I'm trying to set up a header and footer on every page except for the Login page. I initially created a layout.tsx file in the app directory to apply the layout to all pages, which worked fine. However, when I placed another lay ...

javascripthtmlnext.js

Setting maximum and minimum zoom limits for an element ID using JavaScript or jQuery

My application features a DIV element with the unique identifier of mainDiv. The issue I am facing is related to zooming functionality, as it currently lacks any set limits - both for scaling up and scaling down. I have been searching on Google for a sol ...

javascriptjqueryhtmlcss

Using an image as an onclick trigger for a JavaScript function

I am working on a registration page as part of my university project where users can create an account and store their information in a MySQL database. One feature I'm implementing is the ability for users to select an avatar picture. Below is the co ...

javascripthtmlimageonclickavatar

Unleash the power of attribute selectors in a SASS/SCSS list variable: a comprehensive guide!

This is a sample code snippet: $list: ( input[type="text"], input[type="name"], input[type="email"], textarea, select[multiple] ) !default; @each $value in $list { ...

csssass

Issues with the HTML5 progress bar malfunctioning due to alterations made by Angular

Using the html5 progress bar <progress value="5" max="100"></progress> in angular can lead to it being replaced by angular classes. Angular also has its own progress bar that uses similar tags. However, elements like the html5 slider do not get ...

htmlangularjs

Find out the dimension of an object's width

I have a container that I want to slide in and out of view on the screen when a button is clicked. The challenge is that I do not want to set a specific width for the container as it may vary in size. I attempted to achieve this with the following code, ...

jqueryhtml

Utilize JavaScript to seamlessly play a Spotify track within the Spotify client without disrupting your current

A little while back, I recall the simplicity of clicking play on a song within a website and having it instantly start playing on my computer without any additional steps. It was seamless and effortless. My goal for my website is to have music start playi ...

javascripthtmlspotify

Issues with the presentation of HTML DIV elements

I am puzzled by a situation where my HTML layout to present financial data does not seem to update properly in certain browsers. Despite using jQuery and inspecting it with Firebug, the visual display of the parent divs remains unaltered. This issue become ...

jqueryhtmlcss

Unconventional appearance of WordPress Jetpack sharing buttons on unique custom theme

Currently, my wordpress blog has a unique theme and is powered by Jetpack. I've activated Sharing and added various social media sharing services like Facebook, Twitter, Google+, Digg, among others in the "Enabled Settings" section. However, the sha ...

phphtmlcsswordpress

Wordpress articles refuse to appear side by side

I've been at it for hours now, trying to solve this issue with no luck. I have a Wordpress loop on my homepage that displays post thumbnails vertically, but I want them to appear in sets of three images before starting a new line. Here's the cod ...

phpcsswordpress