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

Switch the scroll direction in the middle of the page and then switch it back

Yesterday, while browsing online, I stumbled upon this website and was amazed by the unique scroll direction change from vertical to horizontal mid-page. I'm curious about how they managed to achieve that effect. Does anyone have insight into the pro ...

javascripthtmlcssscroll

How to retrieve the row index from a table using JavaScript

This question has cropped up numerous times, and despite trying various solutions suggested before, none of them seem to be effective in my case. Within a modal, I have a table where users can make changes that are then used to update the database. The ta ...

javascriptphpjqueryhtmlmysql

Seamless changes with graceful fades while transitioning between classes

Is it more efficient to handle this in CSS than using jQuery? I'm not entirely sure. If anyone has a solution, that would be greatly appreciated. However, I am currently facing an issue with the jQuery method I have implemented. It successfully fades ...

javascriptjqueryhtmlcss

Challenges encountered with Material-UI elements

Attempting to implement the http://www.material-ui.com/#/components/drawer (Docked Example) component from Material-UI in conjunction with ReactJS. An error is encountered with the "=" sign in this line: handleToggle = () => this.setState({open: !this ...

javascripthtmlreactjsecmascript-6material-ui

Creating a centered transparent rectangle of a specific width using HTML

I am working on a page layout similar to this FIDDLE body { margin:0 auto; max-width: 800px; padding:0 0 0 0; text-align:left; background-color:#FFFFFF; background-image: url('http://freeseamlesstextures.com/images/40-dirty-pa ...

htmlcss

Ways to minimize the space between elements in a flex container

My goal is to minimize the space between my images that expand on hover. I aim for it to resemble this: expectation However, the current appearance is more like this: reality This is what I currently have: .container { display: flex; width: 100 ...

cssflexboxmargin

increasing the SQL integer value with padding

Is it possible to apply padding to certain INT return values retrieved from an SQL database using CSS within a div tag? I need specific numbers to have padding-left: 20px; while other specific numbers should have padding-right: 20px;. This presents a styl ...

phpcsssqlsorting

Hovering over a white background will darken the CSS styling

A stunning image on a dark background Displayed on Hover (right) An elegant picture with a white background Activated on hover (incorrectly) I would like it to have a darkened effect on the white background as well. CSS Styling .photo background: n ...

css

What methods can I use to create a navigation bar similar to this design?

Lately, I've noticed a growing trend in navigation bars that are designed to resemble waves. Wavey Navbar I'm eager to incorporate a similar navbar into my website, but I'm struggling to figure out how to do it. I'm working with react ...

htmlcss

The back-to-top button guides users back to their last visited page

I'm excited to explore AngularJS and I want to add two "return to top" buttons on different pages. Here's what I have so far: Page 1: <h1 id = "top"> .......... <a href="#top" target = "_self">Return to Top</a> Page ...

javascripthtmlangularjsangularjs-scopehref

Which CSS preprocessor is the best choice for WordPress: SASS or

After comparing SASS and LESS, I found that SASS is the clear winner in my opinion. Unfortunately, setting up SASS on my server requires ruby, gems, and other tools that I don't have access to. On the other hand, it seems like adding LESS to my proj ...

csssassless

What is the best way to manage classNames dynamically in React with Material-UI?

I am wondering how to dynamically add and remove classes from an img tag. My goal is to change the image automatically every 2 seconds, similar to Instagram's signup page. I am struggling to achieve this using the material-ui approach. Below is a snip ...

javascriptcssreactjsreact-hooksmaterial-ui

What are the necessary steps for incorporating Payment/Bank transactions into an e-commerce platform?

Right now, I'm utilizing HTML, CSS, jQuery, and some JavaScript to develop a website. As I work on creating the store section, I find myself unsure of how to incorporate payment methods and all related features. Are there any free "pre-built" systems ...

javascriptjqueryhtmlcss

"Enhancing Code Readability with Language-Specific Syntax Highlighting

My goal is to develop an editor that allows users to input code in various languages by selecting an option from a dropdown menu. The code should then be automatically highlighted based on the chosen language. I am considering using Codemirror for syntax ...

javascripthtmlsyntax-highlightingcodemirrorcodehighlighter

Is there a way to eliminate the return?

Struggling to eliminate the unwanted return in my Wordpress loop. The layout is ruined by trying to display a thumbnail next to the entry: Even using padding for the entry made it worse! Here's the code snippet that I have tried: #thumbnai ...

htmlcsswordpresspositioning

Discovering the compiled CSS file in React when using Sass: A step-by-step guide

In my React project, I have incorporated SASS. Now I am looking to find the final compiled CSS file from that SASS code. Whenever I navigate to: While there is the SCSS file visible, where can I locate the CSS version? I am referring to the compiled outp ...

cssreactjssass

Update the section tag upon submission using jQuery on a jQuery Mobile HTML page

I have integrated a jquerymobile template into Dreamweaver 6.0 to create a mobile app interface. The home screen features four buttons - specifically, View, Create, Update, Delete. Upon clicking the Create button, a new screen is opened (each screen corres ...

javascriptjqueryajaxhtmljquery-mobile

Reloading a page will display [object CSSStyleDeclaration]

Upon editing content and saving changes, instead of displaying my updated content when refreshing the page, it shows [object CSSStyleDeclaration]. function newElement() { let li = document.createElement("li"); let inputvalue = document.querySelector ...

javascripthtmlcss

Having trouble with the move_uploaded_file function in PHP?

I have been actively studying PHP and am currently working on a CMS project. I have encountered an issue with image uploading. PHP if ( $_POST['img']) $uploads_dir = '/images'; $tmp_name = $_FILES["img"]["tmp_name"]; $name = $_FIL ...

phphtmlmysqlfile-upload

Divs are unable to be positioned at the top of the container

I am struggling with the alignment of blocks inside a container that can be dragged and re-sized within their container. The default position should have 7 divs side-by-side at the top of the container, however, they are appearing stacked on top of each ...

jqueryhtmlcssjquery-ui