What could be causing my elements to shift out of place?

Here is the box I created:

BOX

Now, I want to position another box near the input of the BET box.

<div id="x2"></div> <!-- HTML --->
/* CSS */
#x2{
    width: 40px;
    height: 40px;
    background: cornflowerblue;
}

The layout after adding the new box: BOX-AFTER

However, it seems to have affected the thin gray line and content below it. I am unsure why this happened.

Below is the HTML code:

<div class="gamebox">
        <div id="bet-and-chance-texts">
            <p id="bettext">BET</p>
            <p id="profittext"><i class="fa fa-btc" aria-hidden="true"></i> PROFIT</p>
        </div>
        <div id="bet-and-chance-input-boxes">
            <input class="default" id="userbet" onkeyup="checkBet()" value="0.00000000" placeholder="BTC" name="bet" autocomplete="off">
            <div id="x2">x2</div>
            <input readonly class="default" id="profitinput" onkeyup="" value="100" placeholder="BTC" name="bet" autocomplete="off">
        </div>
        <br>
        <div class="line-separator"></div>
        <div id="button-texts">
            <p id="roll">ROLL UNDER</p>
            <p id="payout">PAYOUT</p>
            <p id="chance">CHANCE</p>
        </div>
        <div id="buttons">
            <input class="hidden-boxed-input-roll" value = "50.00"/>
            <input autocomplete="off" id="newpayout" onkeyup="calculateChance()" class="hidden-boxed-input" value = "2.000"/>
            <input autocomplete="off" id="newchance" onkeyup="checkChance()" class="hidden-boxed-input" value = "50"/>
        </div>
        <br>
        <div id="rolldice-section">
            <button type="button" id="dicebutton" onclick="prepareRoll(authToken);" style="vertical-align:middle"><i class="fa fa-gamepad"></i> Roll dice</button>
        </div>
    </div>

And here is the CSS code:

.gamebox {
      height: auto;
      padding: 20px;
      width: 60%;
      font-family: Helvetica Neue;
      color: black;

      margin-top: 20px;
      margin-left: 20px;
      background-color: white;
  }
.line-separator{
    height:.5px;
    background: lightgray;
    border-bottom:.5px solid lightgray;
}
#x2{
    width: 40px;
    height: 40px;
    background: cornflowerblue;
    float: left;
}
input[class="default"]{
    padding: 12px 20px;
    margin : 0 auto;
    box-sizing: border-box;
    text-align: center;
    background-color: #E4ECF1;
    display: inline-block;
}
p[id="roll"]{
    display: inline-block;
    float: left;
    font-size: 13px;
}

p[id="payout"]{
    display: inline-block;
    margin-right: 25px;
    font-size: 13px;
}

p[id="chance"]{
    display: inline-block;
    float: right;
    font-size: 13px;
}
div[id=button-texts]{
    text-align: center;
}

I'm having trouble understanding why everything below the thin gray line is impacted. Any suggestions on how to resolve this issue?

htmlcss

Answer №1

Make this alteration: 

<div id="y3">y3</div>

to : 

<span id="y3">y3</span>

as the div element displays as a block and it is recommended to use the inline span instead

afterwards adjust your styling, eliminate float property and add some padding to #y3 : 

#y3 {
   padding: 15px;
   width: 50px;
   height: 50px;
   background: skyblue;
}

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

Having trouble getting CSS3 Keyframes to function properly?

Check out the following code snippet: .startanimation { height: 100px; width: 100px; background: yellow; -webkit-animation: animate 1s infinite; } @-webkit-keyframes animate { 100% { width: 300px; height: 300px; } ...

javascriptjquerycssanimationcss-animations

When the user clicks on an element, my JavaScript code dynamically updates the CSS property by changing the window

When a tag is clicked in HTML triggering an onclick event, the CSS property that was updated in the JavaScript does not persist. The changes appear momentarily and then disappear once the window is refreshed. Javascript: <script type="text/javascript"& ...

javascripthtmlcss

What is the best way to adjust the height of an IFrame to match the size of its content?

I attempted to set the height of an IFrame to 100% (similar to setting a <div> to height:auto). I specified the height attribute in the <iframe> tag as 100% and also set the height in the style to 100%, but it doesn't appear to be functio ...

javascriptjqueryhtmlcssiframe

in vuejs, a legendary row is added to the table every 25 or 50 records

VueJS v-for is functioning properly: <tr v-for="request in requests"> <td>{{request.name}}</td> <td> .. etc .. </td> </tr> Now, I want to insert a legend row after every 25 or 50 records. Here's what I tri ...

htmlvue.jsv-for

The CSS styling is not taking effect

I'm having trouble with my CSS changes not appearing on the webpage, and I can't seem to figure out why. Specifically, I'm attempting to modify the font, which has previously worked but is now not taking effect. Both my CSS and HTML files ar ...

htmlcsstwitter-bootstrap

Integrate a PHP variable into an HTML/JavaScript statement that was previously transformed from PHP

Incorporated within this PHP variable is a mix of HTML and JavaScript code. My task is to enhance it by adding another PHP variable. Specifically, I have a PHP variable denoted as $user->user_email. How can I seamlessly integrate this variable into th ...

javascriptphphtmlvar

"Utilize AJAX to submit the value of the text box input from a jQuery slider when the Submit Button

Whenever I adjust the sliders, the value is shown in an input textbox. However, when I move the slider and check the values echoed from the textboxes on another PHP page, they are always displaying as 0. Even after clicking the submit button, it still echo ...

javascriptphphtmlajaxxmlhttprequest

Avoid activating the hover effect on an element situated below another element without the use of JavaScript

After reviewing various posts, it seems like the only solution involves using javascript. Is there a way to hover over one element without affecting the style of another element below it, all without relying on javascript? I'm looking for a solution u ...

htmlcss

I am encountering a 404 error when attempting to make a GET request for a file located in the same directory

Here is the Javascript code that utilizes the get method. The directory contains both files - the HTML file where the JS code resides, and the text file. Below is an image of the console displaying errors. ...

pythonhtmldjangoajaxget

Odd Behavior when altering button attribute using Jquery

After disabling a button with a click handler, I have noticed an interesting behavior where the button does not submit afterwards. The issue seems to vary between different browsers, with Firefox still allowing form submission after the button is disabled, ...

javascriptjqueryhtmlformsbutton

An issue occurred with the DOMException while trying to execute the 'setAttribute' function on the 'Element': '{{' is an invalid attribute identifier

Currently, the code is under development and some methods are still empty while the *ngIf directives may not be correct in terms of logic. However, even with these issues, I encountered the same error without bothering to remove them at this stage. While ...

javascripthtmlangular

Populate the div with the URL parameter only when another span element is empty after a specified time interval using setTimeout

When displaying a person's name on a page, there are two different methods to consider. It can be extracted from the URL or retrieved from an email form in the CMS used. However, these two approaches sometimes conflict with each other. Currently, I h ...

javascriptjqueryhtmlcss

Adjusting HTML5 drag height while resizing the window

Code conundrum: var dragHeight = window.innerHeight - parseInt(jQuery("#drag_area").css("margin-top")) - 5;. It sets the drag height based on browser size, but there's a glitch. If I start with a non-maximized browser and then maximize it, the drag he ...

javascriptjquerycsshtml

Catalog of items in Mustache

I am currently working on generating HTML content using the mustache template engine. However, I have encountered an issue when trying to render a list of objects. Below is an example of my object: var Prod={ "Object1": { "name": "name1", "cat ...

javascripthtmlnode.jsmustache

Open a file using the fs module while ensuring the original file is preserved

I've been working on a NodeJS API that sends emails. Each time I need to send an email, I use the index.handlebars template. To customize the template before sending the email, I utilize the Node File System (fs) module to readFileSync() and then ap ...

htmlnode.jshandlebars.jsfs

What is the best way to shift <p> slightly to the left using css?

I've created an HTML file structured like this. <html> <head> </head> <body> <div class="final_time"> <p class="final_time_text">some text here</p> </div> </b ...

htmlcss

Styling the navigation menu for mobile devices

How can we transition from a menu like this : https://i.sstatic.net/qQ2k1.png to this when the screen size reaches a specific width: https://i.sstatic.net/AUM4v.png In essence, replacing certain texts with icons. Is pre-defining it and changing the dis ...

css

Tips for effectively managing JSON data in my application

I'm working on a project to create a website that monitors the number of coronavirus cases in my country. The data is organized and stored in a file called cases.json using the following structure: { day: { city: { cases: 1 } ...

htmljson

Can the sidebar be positioned after the div on an HTML page?

Is it possible for the sidebar to remain static until it is reached by scrolling on the page? I want it to be positioned below the Jumbotron and then stick to the left and top when scrolling down. Currently, it's overlapping everything and adjusting z ...

htmlcssbootstrap-4css-positionsidebar

Error: The locator I used with the ID getUserById did not find any elements

Here is the code snippet from my HTML file: <h1>User list</h1> <button class="btn btn-primary" [routerLink]="'/register'">Register</button> <br> <br> <table class="table& ...

javascripthtmlangularprotractor