CSS behaving strangely with the height property

I've run into a specific issue with a div element that contains multiple buttons. I am trying to adjust the height and position of one button so that it takes up space above the other buttons, but every time I make changes to its height and position, it causes the adjacent buttons to shift downwards.

#Cal_Border {
background-color:white;
border:1px solid black;
display:inline-block;
padding:2px;
}

#Num_View {
background-color:white;
border:1px solid black;
width:98.4%;
}

.Button {
background-color:white;
border:1px solid black;
width:22.9%;
height:10%;
padding-top:2px;
margin-bottom:0;
margin-bottom:2px;
}

#Equals {
height:40px;
position:relative;
top:-20px;
}

#Cal_Border input:focus {
outline:none;
}

<div id="Cal_Border">
        <input type="text" id="Num_View" /><br />
        <input type="button" value="<--" class="Button" />
        <input type="button" value="C" class="Button" />
        <input type="button" value="-/+" class="Button" />
        <input type="button" value="/" class="Button" /><br />
        <input type="button" value="1" class="Button" />
        <input type="button" value="2" class="Button" />
        <input type="button" value="3" class="Button" />
        <input type="button" value="x" class="Button" /><br />
        <input type="button" value="4" class="Button" />
        <input type="button" value="5" class="Button" />
        <input type="button" value="6" class="Button" />
        <input type="button" value="-" class="Button" /><br />
        <input type="button" value="7" class="Button" />
        <input type="button" value="8" class="Button" />
        <input type="button" value="9" class="Button" /><br />
        <input type="button" value="0" class="Button" />
        <input type="button" value="." class="Button" />
        <input type="button" value="+" class="Button" />
        <input type="button" value="=" class="Button" id="Equals" />
</div>
jqueryhtmlcss

Answer №1

After some tweaking, I believe I have it set up how you prefer. Take a look at the fiddle and let me know if it meets your expectations.

http://jsfiddle.net/Ru3QA/2/

#Cal_Border {
background-color:white;
border:1px solid black;
display:inline-block;
padding:2px 0 0 2px;
}

#Num_View {
background-color:white;
border:1px solid black;
width:96%;
margin-bottom: 2px;
}

.Button {
background-color:white;
border:1px solid black;
width:22%;
height:10%;
padding-top:2px;
margin-bottom:0;
margin-bottom:2px;
}

#Equals {
height:40px;
position: relative;
top:-20px;
float: right;
left: -5px;
}

#Cal_Border input:focus {
outline:none;
}

Perhaps Option 2 is more suitable for your needs.

http://jsfiddle.net/Ru3QA/3/

I simply adjusted #Cal_border { position: relative; }

and made alterations to the "equals" section

#Equals {
    height:40px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}

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

Styling the file input type in AngularLearn how to customize the

I've come across numerous queries on how to style an input type file, but I'm struggling to implement it in an angular context. So, what is the best way to customize the appearance of an input type file within an angular application? Below is t ...

javascriptjqueryhtmlangularjs

Problem with CSS hovering on images when hovering on links?

While attempting to add 2 hover images to my website, I encountered an issue where a black border appeared in the middle of the images. This was caused by the hover effects on the links. Below is the code snippet: a:hover,a:active { color:Black; o ...

htmlcss

The initial return value of $(document).height may be inaccurate, but is accurate upon recalculation

I am working on implementing a pop-up screen and I would like to darken the background when it opens. Below is the Javascript code: $(document).on('click', '.item', function(){ $("#popUp").css("display" , "block"); ...

javascriptjquery

What is the best method for placing a single character from a user's quote into a table?

this is an example of some HTML code <section class="insertionCitation"> <label>Quote:</label> <input #quote (keyUp.Enter)='validateQuote(quote.value)'> </section> `- how can I display one letter ...

htmlangular

Is it wise to use the<sup>attribute for mandatory form fields?

Would it be wise to utilize the <sup> tag instead of using margin-top: -xnumberofpx for indicating required fields in a form? <label for="address1" required>Address line 1<sup><img src="/src/images/requiredAsterix.png" width="10" heig ...

csshtmlaccessibility

Adapting JavaScript functions from IE to work on Firefox and Chrome: A comprehensive guide

I have encountered an issue with a function that retrieves the selected text range within a contenteditable div. While it works perfectly fine in Internet Explorer, it doesn't seem to work in Firefox and Chrome. Could someone kindly provide guidance ...

javascripthtmlgoogle-chromefirefoxgetselection

Undoing alterations to the user interface in Angular 2 after discontinuing bi-directional data binding

UPDATE: Including code for further clarification. client.component.ts import { Component } from "@angular/core"; import { ClientService } from "../services/client.service"; import { Client } from "../types/client"; @Component({ selector: "rpcs-client", ...

htmlangulartwitter-bootstrap-3

The navigation bar buttons in my IONIC 2 app are unresponsive on both the

In Ionic 2 for Android, I encountered an issue with the title placement. To resolve this, I applied some CSS to center the title and added left and right buttons to the nav bar. However, when I tried to implement onclick functionality for these buttons, no ...

htmlcssangularjsionic2hybrid-mobile-app

The appearance of Recaptcha buttons is unattractive and seemingly impossible to

Let me start by saying that I have already looked into the issue of "Recaptcha is broken" where adjusting the line-height was suggested as a solution. Unfortunately, that did not work for me. After implementing Google's impressive Recaptcha on my web ...

javascripthtmlcssrecaptcha

What is the best way to incorporate a hyperlink in a React project using Tailwind

I am working on a project using React and Tailwind CSS. I want to be able to redirect the user to the next page when they click on a link. I have tried using the <a /> tag, but I'm not seeing any noticeable difference between that and the <p ...

htmlreactjsnpmtailwind-css

Can jQuery be used to transfer a File from a File Input to a Controller?

Is there a way to successfully pass a file to my Controller as a HttpPostedFileBase using jQuery? I am trying to achieve this so that I can parse through the file and then return information back to the page. An example scenario would be allowing a user to ...

jqueryasp.net-mvcfile-uploadhttppostedfilebase

Noticeable increase in load time post integration of Facebook SDK

I am in the process of integrating Facebook social buttons into my website. Feel free to visit the website here. Though I am new to using the Facebook API, I noticed a significant increase in load time after adding the code to the footer. After conductin ...

jqueryhtmlfacebook-javascript-sdk

Arranging elements on a webpage using CSS grid placements

Currently experimenting with css grid, envisioning a scenario where I have a 2x2 grid layout. When there are 4 child elements present, they would form 2 rows of 2 elements each. My challenge is when dealing with an odd number of children, I aim to avoid al ...

htmlcsscss-grid

Deactivate JQuery star rating plugin after user has voted

I've integrated the JQuery star rating plugin (v2.61) from into my project. Everything is working smoothly, but I am looking for a way to disable the stars once a user has voted. Currently, users are able to select their rating and submit it through ...

javascriptjqueryajaxjquery-plugins

Save an HTML5 canvas element as a picture using JavaScript and specify the file extension

Is there a way to save an Html5 canvas element as an image file using Javascript? I've tried using the CanvasToImage library, but it doesn't seem to work for this purpose. You can view my current code on JsFiddle. <div id="canvas_container" ...

javascriptjqueryhtmlcanvas

Trigger a click event on a dynamically loaded button

Here's a unique twist to the usual discussions on this topic. I have a dynamically loaded button in my HTML, and I've saved the selector for it. Later on in my code, I need to trigger a click event on this button programmatically. The typical $(& ...

javascriptjqueryhtmldom

Integrate PHP include files into a website without allowing direct access, then dynamically load them using jQuery AJAX

I am utilizing jQuery AJAX to load the content of about.php page into my index.php section in this manner: $('.nav a[href="#about"]').on('click', function() { $('main').load('../../layout/about.php'); }); The iss ...

javascriptphpjqueryajaxsecurity

Using Python and Django to Populate Form Fields in a Model with values from an Imported JSON dataset

I am facing a challenge where I have a model form that stores all user inputs from form fields into the database as one entry. Additionally, I possess a JSON file with numerous JSON objects whose attributes correspond to the form field of the model. This ...

pythonhtmljsondjango

Using jQuery to assign the value of a hidden element to data being posted

When using jQuery's post() method to call an ajax action that returns JSON data ({"Success": "true" } or {"Success": "false"}), the value of a hidden HTML element is supposed to be set to the Success value in the returned object. However, after settin ...

javascriptjqueryhtmlajaxjson

What is the best way to achieve this in Node.js/Express using Redis? Essentially, it involves saving a callback value to a variable

Here is the data structure I have set up in redis. I am looking to retrieve all values from the list and their corresponding information from other sets. Data structure : lpush mylist test1 lpush mylist test2 lpush mylist test3 set test1 "test1 value1" ...

javascriptjquerynode.jsexpress