Why does my div block move around when it has content in it?

.role_wrapper1,.role_wrapper2 {
  display:inline-block;
}


.role_wrapper1 {
  width:200px;
  height:230px;
  border: 2px solid rgba(204, 204, 204, 0.2);
  border-radius: 10px;
  margin-right:6px;
}

.role_wrapper2 {
  width:200px;
  height:230px;
  margin-right:10px;
  background-color: #f8f8f8;
  border-radius: 10px;
}
<div class="role_wrapper1">1</div>
<div class="role_wrapper2"></div>

When the first div is empty, both divs display correctly. However, when content is added to the first div, it causes a shift in the second div.

Is there something missing in my code?

htmlcss

Answer №1

You are missing the following: float:left

.role_wrapper1,.role_wrapper2 {
  display:inline-block;
}


.role_wrapper1 {
  width:200px;
  height:230px;
  border: 2px solid rgba(204, 204, 204, 0.2);
  border-radius: 10px;
  margin-right:6px;
  float:left
}

.role_wrapper2 {
  width:200px;
  height:230px;
  margin-right:10px;
  background-color: #f8f8f8;
  border-radius: 10px;
}
<div class="role_wrapper1">1hjghjjgj</div>
<div class="role_wrapper2"></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 the browser width is reduced, the text appears outside of the image

When pasting text into an image in this example, everything looks fine at first. However, as the browser width is reduced, the text starts slipping out of the picture. To make matters worse, unsightly line breaks are also added. Is there a way to prevent ...

htmlimagecss

php The POST method is unable to process the <img src="http://

Currently working on a form that allows users to input any text, including Html and JavaScript, to update articles on the site. Everything was running smoothly until I encountered a strange error today. When attempting to save text with Html to a MySQL da ...

phpmysqlhtmlinsert

What is the best way to adjust the size of my <div> to accommodate additional vertical content?

Every time I attempt to include margin-top: 30px to my box_1 and box_2 <div>, the bottom <div> is pushed down and disappears. It seems like my wrapper isn't expanding to accommodate the content. How can I achieve a 30px space between the ...

htmlcss

Mastering the integration of this asmx webservice with jQuery/ajax

Hello, I need some assistance with a webservice that I have. The webservice URL is My goal is to display a list of products from this service (where ObtenerProductosPorId translates to GetProductsById) on an HTML page. I have been researching how to achi ...

jqueryhtmlajaxasmx

A straightforward jQuery conditional statement for dynamically generated content

If the div '#ajax' contains content, I want to make the div '.container' clickable. Here is the basic jQuery script I have implemented: if ('#ajax:empty') { $('.container').css('pointer-events', ' ...

jquerycssajax

Struggling to align the div horizontally using text-align?

I need to make the div align horizontally. .d1 { margin-left: 1rem; margin-right: 1rem; font-size: 0; text-align: justify; } .d1::after { content: ''; font-size: 0; line-height: 0; height: 0; width: 100%; di ...

htmlcss

Vue JS nested component does not appear in the document object model

I developed two separate VueJS components - one displaying a modal and the other featuring HTML input fields. When I attempt to nest these two components, the inner component fails to appear in the DOM. What could be causing this issue? Here's a snip ...

javascripthtmlvue.jsvue-component

Adjust the line selection color in datatables with the power of jQuery

When I click on a row in my datatable, I want the selected row to have a background color of red and all other rows to have a background color of white. I attempted to achieve this with the following code: $(document).on('click', "#table_user t ...

jquerycssdatatable

Ways to repair the mat-tab header

Within my application, I have five mat-tabs each containing a large amount of data which requires scrolling. Is there a way to fix the header of the tab while allowing the content to scroll? I attempted adding position:fixed; and position:sticky within: ...

cssangularangular-material2

Hide CSS background with React onclick

This particular div is responsible for creating a red box. However, my goal is to remove it upon clicking. I attempted to use state to achieve this functionality but unfortunately, it did not work as expected. import React, { Component } from "react"; ...

javascriptcssreactjs

Check that EACH radio button has been either selected or left unselected when the button is clicked

I'm still learning Javascript and currently working on a function triggered by a button click. My goal is to display an alert if NONE of the radio buttons have been selected, regardless of whether they are "Yes" or "No." If ALL radio buttons have been ...

javascripthtmlvalidationdomradio-button

Unable to set the opacity of rc-tooltip to 1

Despite customizing our tooltips with CSS, we are still experiencing an issue where the tooltips appear translucent rather than having an opacity of 1. This is evident in the image provided (with text visible in the background): https://i.sstatic.net/nlM ...

cssreactjstypescripttooltip

Why isn't my dropdown menu appearing correctly?

After trying numerous approaches, I am still struggling to create a drop-down menu from an image. The cursor does change to a pointer, but something is clearly not right. Here are the HTML and CSS snippets I am currently working with: <a> <im ...

htmlcssdrop-down-menudropdown

`The universal functionality of body background blur is inconsistent and needs improvement.`

I've developed a modal that blurs the background when the modal window is opened. It's functioning flawlessly with one set of HTML codes, but encountering issues with another set of HTML codes (which seems odd considering the identical CSS and Ja ...

javascripthtmlcssarraysbootstrap-4

What is the best way to link CSS files from libraries that are downloaded using npm?

For instance, let's say I installed a package: npm install --save package and it gets saved in ./node_modules/package/ Inside that folder, there might be a directory named styles and within that directory, you could find style.css. How can I link ...

javascripthtmlcssnode.jsnpm

When using div elements for tables, the width and text ellipsis properties are not enforced

I need help creating a simple table that will truncate text with ellipses if it exceeds the width. Despite my efforts, the width is not being applied correctly. You can see the issue here: Check out this JSFiddle for the table width Here is the code sni ...

htmlcss

Is there a way to uninstall Bootstrap from an ASP.NET project?

After setting up the backend for my ASP.Net webforms project, I am now shifting my focus to design. My goal is to incorporate Google Material Design Lite into the project, but I am facing a challenge. Despite removing all the Bootstrap stylesheets that w ...

cssasp.nettwitter-bootstrap

What is the process for adding and removing classes using CSS's "ClassName" property in React?

I've been diving into React recently and one thing I'm struggling with is how to seamlessly add and remove CSS classes. Take for example the component below: import React from 'react'; import "../../styles/signInAndSignUp.css"; import l ...

javascriptcssreactjs

FusionCharts Gauges may share similar code, but each one produces a unique output

Currently, I am developing a project that involves creating a dashboard with 3 gauges. These gauges are enclosed in bootstrap cards with a column value set to 4. In the layout of the dashboard, these 3 cards are positioned next to each other. I have succe ...

javascripthtmllaravel

Utilize an Ajax function to call the BOT listening URL within a Web method

My recently developed web application features a submit button that triggers an Ajax call to communicate with the BOT. The code snippet used for the Ajax function is as follows: <script> $(document).ready(function () { $("#btnSend& ...

c#htmlasp.netajaxbotframework