How can I position four DIV elements to the right of each other inside a parent DIV?

I am attempting to align 4 divs next to each other within a parent div at specific positions. The proposed div structure is as follows (referred to as the maindiv):

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

My goal is to position the div containing the text '1' to the left within the maindiv.

Then, I aim to position the div with text '2' 50px from the left side of the maindiv.

Next, I intend to set the div displaying '3' at 150px from the left side within the maindiv.

Lastly, I plan to place the div showing '4' at 200px from the left side of the maindiv.

I have attempted multiple CSS methods without success, unfortunately.

Does anyone have any suggestions?

css

Answer №1

Remember to assign position: relative to the parent div

For the children elements, set position: absolute> and position them using left: xyz; top: xyz.

Answer №2

I hope this solution proves to be beneficial for you

                <div> 
                    <div style="float: left;">A</div> 
                    <div style="float: left; margin-left: 50px;">B</div> 
                    <div style="float: left; margin-left: 100px;">C</div> 
                    <div style="float: left;margin-left: 50px;">D</div> 
                </div>

Answer №3

You may want to give this a try:

 div div
      {
          float:right;
          margin-left:80px;
      }

EDIT: Alternatively, here is a solution for the parent element:

div
{
    float:right;
    margin-left:-80px;
}
div div
{
    float:right;
    margin-left:80px;
}

Answer №4

Mastering Flexbox Layout

Flexbox has emerged as the preferred method for layout design, thanks to its simplicity and ease of use.

.container{
  display:flex;
}
.item{
  width:50px;
  height:50px;
  border:1px solid black;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</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

When viewing my website on a mobile device, all elements that are supposed to be hidden on the desktop version are displayed properly. However, when I resize the

I have implemented code in my css file to hide specific items from the topbar on my website. When I view the site on my desktop and inspect it with mobile view, the hidden items appear correctly concealed. However, when I access the website on my phone, ...

cssmobile

The background color of the active tab is updated upon loading the page

I have attempted to modify this code to change the background color of li tag on click. It successfully changes the background color when hovering or clicking, but unfortunately reverts back to the default color upon page refresh. I am looking for a soluti ...

javascriptjqueryhtmlcss

Is it possible to shift the div inline-block using the CSS :after selector?

I'm looking to adjust the placement of the disk icon so that it aligns more with the baseline of the text without increasing the vertical space between lines. Below is the CSS code I've worked on so far: .openPage:after { content: ' &a ...

htmlcss

The animated loading image is taking an eternity to actually load

My website is loaded with heavy front-end features and I'm using a loading gif to help with the loading process. However, I've noticed that in Safari, there is a delay before the gif loads after the background does, which takes away from the inte ...

javascriptjqueryhtmlcssloading

Require an additional button to dynamically load more content and shift all existing elements further down the page

I am looking to implement a "load more" button for an Instagram feed on my website. My current approach involves increasing the height of a specific section while moving the rest of the page down. This is what I have tried: <script> $(document.ready ...

javascriptjqueryhtmlcss

Why is a div nested inside an overflow: hidden; div not expanding to the full width of its content?

.container { white-space: nowrap; overflow: hidden; } .inner { width: 100%; } .list-item { display: 'inline-block', boxSizing: 'border-box', border: '3px solid black' } import React, { Component } from 're ...

javascriptcssreactjs

Creating an oval cutout shape using CSS in a div element

I am currently facing some challenges creating the design depicted in the image above, particularly with the oval shape. Let me provide an explanation: The menu bar is designed as a div with a subtle linear gradient that transitions from dark grey to a l ...

jqueryhtmlcsscss-shapes

Sticky position applied and overlapping with the following container

I'm struggling with the CSS property position: sticky. In my layout, I have three boxes stacked one after another. Each box is styled with the class container from Bootstrap. The middle box, labeled as box-2, needs to be fixed in its position. To ach ...

htmlcssbootstrap-4

Struggling to toggle the visibility of a table with a button - successfully hiding it, but unable to make it reappear?

I need a button that can toggle (show/hide) a table. Currently, my code hides the table successfully, but it fails to show the table again when I click the button. It seems like there is an issue with refreshing or redirecting after clicking the button for ...

javascripthtmlcss

Issues with Bootstrap Navigation Collapse Utilizing Data Attributes

I'm having trouble getting a Twitter Bootstrap 3 navbar to collapse using data attributes, as it is not expanding properly. Just to give some context, the project I am working on is an ASP.NET C# MVC project that runs on DNN (DotNetNuke) CMS. When I ...

javascripthtmlcsstwitter-bootstrap

CSS - Curved background image in the top left corner

Currently in the process of creating a website here. There is a postcode search div on the right side, and I am looking to round the top corner of it. I have decided to use images to achieve the rounded corners effect. My requirement is that any method us ...

cssrounded-corners

Detecting click events in D3 for multiple SVG elements within a single webpage

My webpage includes two SVG images inserted using D3.js. I am able to add click events to the SVGs that are directly appended to the body. However, I have encountered an issue with another "floating" div positioned above the first SVG, where I append a dif ...

javascriptjquerycssd3.jssvg

Address the underlying issues with the background

I am working on an app and I want to include a fixed background image. I am using HTML5, CSS3, and JavaScript for this project. I have applied the CSS code to set the background image as fixed: body{ background:#1F1F1F url(../assets/bg.png) fixed;} Ev ...

htmlcss

Struggling to use GSAP to control the timeline with my custom functions

I'm attempting to create a greensock animated banner with the ability to switch between different scenes. I've made progress by setting up the timeline for each scene's intro and outro animations using the GreenSock API documentation. Howeve ...

jqueryhtmlcssgsap

Some CSS features might not work properly when using Vuetify alongside Vue.js and Webpack

I believe the issue may stem from my inability to correctly import the JS file for Vuetify, but I haven't been able to pinpoint any errors. It seems that certain CSS functionalities of Vuetify, like list highlight events, are not working in my applica ...

javascriptcsswebpackvue.jsvuetify.js

What is the best way to ensure that the content fits within a div with a given max-width set by the parent div?

image description goes here I have a container set to a maximum width of 80%, but when the text inside extends beyond that, the container remains stuck at 80% instead of adjusting its size accordingly. Can anyone provide a solution for this issue? ...

cssstorybook

Using the margin property creates an odd spacing issue that seems out of place

Here is the HTML and CSS code that I am using: div { background: yellow; width: 77px; height: 77px; border: 1px dotted red } #one { margin: 0px 21px 41px 41px } <html> <head> <meta charset="UTF-8"> ...

htmlcssmargin

Why does text display differently in HTML (Firefox) on Ubuntu compared to Windows 7?

When viewing the HTML and CSS code in Firefox on Windows, everything appears fine. However, when I view it in Firefox on Ubuntu, it looks out of place. How can this be corrected? Any suggestions? Additional information: The CSS code used for the text show ...

htmlcssubuntu

Can Chrome support color management for css colors?

In my current project, we are dealing with designers who work in Adobe RGB and are accustomed to viewing the vibrant colors from that spectrum in Illustrator. However, we are developing an application that will enable them to work in a web browser using a ...

csscolorsthree.jscolor-management

Having trouble with Safari on your iPhone? Seeing image outlines peeking through radius borders?

Has anyone encountered a similar issue before? I'm experiencing this problem specifically on Safari for iPhone. Problem: https://i.sstatic.net/ffqWz.jpg Solution: https://i.sstatic.net/z1bUB.png Below is the HTML code snippet: <div class="row"& ...

htmlcss