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

Ensuring Email Authenticity in React Native

I'm currently working on email validation and have a specific condition in mind. If the email textbox is empty, I want to return true When the email textbox is not empty, I need to check if the input is a valid email address If the email is n ...

jqueryreactjsreact-native

What could be causing the div to not respond to ngAnimate?

Recently, I encountered an issue with adding animations to a list of <div>'s in my webapp. After incorporating ngAnimate into the app.js file and including ng-animate="'animate'" in the <div>, I was disappointed to find that the ...

javascripthtmlcssangularjs

How can we trigger the Skill bar effect upon scrolling to the section?

I have created a stunning Skill Bar that is functioning perfectly. However, I am looking to enhance the experience by having the skill bar effect trigger only when I scroll to that specific section. For example, as I navigate from the introduction section ...

javascriptjqueryhtmlprogress-bar

What is the best way to reposition the caret within an <input type="number"> element?

How can I make the caret move when an input is clicked? The code I found works with text, but not with number. Also, is there a way to pass the length without specifying a value (e.g. 55) in the parameters? HTML <input type="number" name="cost" value= ...

javascriptjqueryhtml

Something seems off with Chrome

I am facing a unique issue that I need help with. Unfortunately, the code is too long to post here but essentially it involves creating a menu for a website. The menu works perfectly and looks great on all browsers except for Chrome. This is unusual as Ch ...

htmlcssgoogle-chromefrontend

Position a div in the center and add color to one side of the space

I am seeking a way to create a centered div with the left side filled with color, as shown in examples. I have devised two solutions without using flexbox, but both seem somewhat like hacks. body { margin: 0; padding: 0; } .header { width: ...

htmlcss

Having trouble with hover effects not working on links due to the container? Here's a solution for you

I would like to create a layout with 3 columns for menu, story, and description. Each story should have its own unique description. Everything was working fine until I added a div to the middle column. The same issue arose with the right column but I manag ...

htmlcsshover

The functionality of Angular animate becomes compromised when there is a conflict between predefined CSS states and transition states

Explore this example CSS code: /* animations at the start */ .error-animation.ng-enter { -webkit-transition: 0.5s linear all; transition: 0.5s linear all; opacity: 0; } ...

javascriptcssangularjsanimationng-animate

Is there a more efficient method to execute this AJAX request?

$('#request_song').autocomplete({ serviceUrl: '<%= ajax_path("trackName") %>', minChars:1, width: 300, delimiter: /(,|;)\s*/, deferRequestBy: 0, //miliseconds params: { artists: 'Yes' }, onSelect: functi ...

javascriptajaxjquery

Dynamically adjust the image link in responsive mode to improve user experience

Is there a way to dynamically change the image links in responsive mode on WordPress? I am displaying thumbnails with a fixed size of 280*200, but I want to switch to medium-sized thumbnails (480*200) when the resolution is between 480px to 600px. Is there ...

phphtmlcsswordpressresponsive-design

The jQuery remove() function seems to be malfunctioning

Here is the given code snippet: function updateMsg() { $.post("AjaxChatServer.jsp",{ time: timestamp }, function(xml) { alert("1"); $("#loading").remove(); addMessages(xml); }); setTimeout('updateMsg()', 4000) ...

jqueryxmlajax

What is the best way to use AngularJS to extract values from the first dropdown menu that are linked to the values selected in the second

How can I link values in two dropdowns using AngularJS? Hello everyone, I have set up two dropdown fields in MyPlunker and within the ng-option tag, I have applied a filter like filter:{roles: 'kp'} to only display users with the role of kp. T ...

htmlangularjsmeanjs

Escaping an equal sign in JavaScript when using PHP

I am currently working on the following code snippet: print "<TR><TD>".$data->pass_name."</TD><TD><span id='credit'>".$data->credit_left."</span></TD><TD><input type='button' val ...

phpjavascripthtmlajax

Numerous objects come into view as you scroll

I found a code snippet online that animates items as they appear on scroll. However, the code only triggers animation for one item at a time. How can I modify the code to trigger the animation for all items? const observer = new IntersectionObserver(e ...

javascripthtmlcssanimation

CloudFront for Amazon - Limit MP3 playback to designated website

I've been trying to find a solution for allowing mp3 files in an Amazon S3 bucket paired with Cloudfront to be streamed directly on my site without revealing the source URL of the mp3s. I want to prevent others from sharing or leeching the link by vie ...

javascripthtmlamazon-s3amazon-cloudfrontmediaelement.js

How can I implement two dropdowns in jquery?

One of my dropdown menus is currently utilizing this code to fetch the selected value: $(document).on('change','#DropDown1',function() { var value1 = $(this).children("option:selected").val(); var data = {"key": value1}; ...

javascriptjqueryajax

Struggling to insert a span element into an anchor tag within a dynamic WordPress navigation menu

I am currently attempting to insert a span tag within a tags in the secondary navigation located on the second level of the following page URL. Thus far, I have only discovered methods for adding span tags to the main navigation as well as child and grand ...

phpjquerywordpress

Loading parts of a web page dynamically with ajax or jquery techniques

I've been working on a video portal website and it's almost complete, but I'm experiencing some performance issues. The page takes too long to load the entire content. My goal is to have the header of the page load immediately and then use ...

c#jqueryasp.netajax

Creating an identifier for the jQuery slideToggle function involves assigning a unique class or ID to

I am currently working on creating an identifier for the jQuery slide.Toggle function. In my PHP code, I have a loop that prints values, each with a button and a div that should be able to slide toggle. So far in PHP, here is what I have attempted, withou ...

javascriptjquery

What sets apart auto, 0, and no z-index values?

Can you explain the distinctions between the following: z-index: auto z-index: 0 the absence of z-index In all scenarios mentioned, we have a container div that contains two inner divs, named div1 and div2, with respective z-index values of 9 and 10. T ...

htmlcssz-index