How can I ensure an element fills the width of its container without being pushed out by margins?

Is there a way to make an element adjust its width based on the container size without overflowing it?

body {
-moz-osx-font-smoothing: grayscale;
font-family:Verdana;
font-weight:normal;
font-size:12px;
}

#BorderContainer2085  {
position:absolute;
top:30px;
left:37px;
width:340px;
height:160px;
display:inline-block;
border-width:1px;
border-color:#696969;
border-style:solid;
border-radius:0px;
}

#Button1199  {
position:absolute;
top:19px;
margin-left:20px;
margin-right:20px;
width:100%;
}
<div id="BorderContainer2085">
<input id="Button1199" type="button" value="Button">
</div >

My current output:

https://i.sstatic.net/W9UDD.png

Desired output:

https://i.sstatic.net/sn3QC.png

javascripthtmlcss

Answer №1

Is the use of width:calc(100% - 40px); for a button element effective in achieving the desired effect?

For example: 

body {
-moz-osx-font-smoothing: grayscale;
font-family:Verdana;
font-weight:normal;
font-size:12px;
}

#BorderContainer2085  {
position:absolute;
top:30px;
left:37px;
width:240px;
height:160px;
display:inline-block;
border-width:1px;
border-color:#696969;
border-style:solid;
border-radius:0px;
}

#Button1199  {
position:absolute;
top:20px;
margin-left:20px;
margin-right:20px;
width:calc(100% - 40px);
}
<div id="BorderContainer2085">
<input id="Button1199" type="button" value="Button">
</div >

Answer №2

body {
  -webkit-font-smoothing: antialiased;
  font-family: Arial;
  font-size: 14px;
  font-weight: normal;
}

#Container785 {
  border-color: #333333;
  border-radius: 5px;
  border-style: solid;
  border-width: 2px;
  display: inline-block;
  height: 200px;
  left: 50px;

  /* Include this */
  padding-left: 15px;
  padding-right: 15px;
  
  position: absolute;
  top: 40px;
  width: 360px;
}

#Btn1002 {
  /* Change absolute to relative
  position:absolute;*/
  position: relative;
  
  top: 25px;
  
  /* Comment out
  margin-left: 15px;
  margin-right: 15px;
  */
  
  width: 100%;
}
<div id="Container785">
 <input id="Btn1002" type="button" value="Click Me">
</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

Using directive to access service values directly

I am in need of utilizing a directive to fetch and display data using ng-repeat from a service. The anticipated result will be <ul>Days <li>Monday</li> <li>Tuesday</li> ... <ul> <ul>Month <li>January</li ...

javascriptangularjsangularjs-directiveangularjs-service

Other elements remain unaffected by the CSS transition

Hey everyone, I have a school project where I'm working on animating certain objects. I've successfully implemented CSS transitions, but I'm having trouble with other elements being affected by the animation. I've seen advice about usin ...

htmlcssangularjsanimationtransition

When the window is resized, the div shifts position

I recently added a div to my website with the following code: <div id="div"></div> #div { height: 400px; width: 300px; position: absolute; right: 59%; text-align: left; } Howe ...

htmlcss

Illuminate the current page

I have been working on a website with around 20 pages that all have a side navigation bar. To make it easier to manage, I decided to centralize the links in a JavaScript (JS) file and include it on each HTML page. This way, any changes can be made quickly ...

javascriptjqueryhtmlcssweb

Tips for validating user input in AngularJS without using a form tag

Within a popup, I am displaying HTML content that has been copied from another div and shown in the popup. I need to validate this input field to ensure it is required, and display an error message below the input box. <!-- HTML code for changing zip c ...

javascriptjqueryhtmlcssangularjs

Storing a class method in a variable: A guide for JavaScript developers

I am currently working with a mysql connection object called db. db comes equipped with a useful method called query which can be used to execute sql statements For example: db.query('SELECT * FROM user',[], callback) To prevent having to type ...

javascriptnode.js

Help with Crafting Responsive CSS Design

I am seeking help to better comprehend the concept of responsive design through this question. Let's imagine a header on a standard desktop screen. Within that, I have a div element containing the information I wish to showcase. .hdrinfo{ width: ...

cssresponsive-designmedia-queries

Display the menu upon activating the hover event icon using only CSS

Assistance Needed - Unable to activate hover and display the rest of the div I want to activate the hover effect where early levels are visible, and when hovering over the first level, the subsequent levels appear List item body { margin: 3%; } div.ti ...

htmlcss

Troubleshooting HTML/CSS and JavaScript Issues with Dropdown Menus

I'm having trouble getting my dropdown menu to work properly and I can't figure out why. The JavaScript code should toggle a class that hides the language options and slides up the other tabs like "Contact". However, when I click the button, noth ...

javascripthtmlcss

Ways to change the border color of Bootstrap cards

While working on my webpage, I utilized bootstrap cards to maintain a clean and organized layout. By default, bootstrap cards are white in color. Unlike the navbar, where you can easily set color options like navbar-dark, changing the color of the cards re ...

htmlcssbootstrap-4bootstrap-5bootstrap-cards

Transferring information from MySQL to Vue.js data attribute

I have retrieved some data from MySQL and I am looking to integrate it into a vue.js data property for seamless iteration using v-for. What is the ideal format to use (JSON or array) and how can I ensure that the data is properly accessible in vue.js? &l ...

javascriptmysqlvue.js

Testing HTTP requests on a form click in Vue.js 2 - Let's see how

Within my component, I have the following method: methods:{ ContactUs(){ this.$http.post("/api/contact-us").then((res)=>{ ///do new stuff },(err)=>{ //do new stuff }) ...

javascriptunit-testingvue.jsjestjs

Storing JSON information within a variable

I'm currently working on an autocomplete form that automatically populates the location field based on the user's zipcode. Below is the code snippet I've written to retrieve a JSON object containing location information using the provided zi ...

javascriptjson

`Some Items Missing from Responsive Navigation Menu`

Hey there! I'm currently diving into the world of responsive design and I'm attempting to create a navigation bar that transforms into a menu when viewed on a mobile device or phone. Everything seems to be working fine, except that not all the na ...

javascripthtmlcssresponsive-design

Issue with flex item not expanding to fill entire height within flex container

My markup contains the following code: .container { display: flex; width: 500px; } .col1 { background: red; height: 100%; width: 50px; } .col2 { background: blue; flex: 1; height: 200px; } <div class="container"> <div class= ...

cssflexbox

Refreshing Bootstrap-Vue Table does not result in updating the table with table.refresh() method

I am facing an issue with a table that is supposed to be updating its data dynamically. The scenario is such that when a button is clicked in the parent component, a server call is triggered and a JSON file is loaded into a child component (the table) via ...

javascriptvue.jsbootstrap-vue

JQuery does not allow for changing the selection of a RadioButtonFor

I am currently working on a code that determines whether or not to display contact information. To achieve this, I am using the RadioButtonFor html-helper with a boolean value for the MVC view model in Razor. Upon loading the page, I need to switch from t ...

javascriptjqueryasp.net-mvcrazorhtml-helper

Navigating to redirected URL within jquery's get() function

When I tried sending a get request to a Google App Script URL in my application using JQuery's get method, everything was working fine. However, out of the blue, that API started redirecting to a different URL in case of an authentication error. As a ...

javascriptjqueryajax

Display the PHP variable's contents as a text string within an HTML document

Looking at a WordPress PHP script, I came across the following snippet: echo '<div class="slide-media">' . $slide_media . '</div><!--/.slide-media-->' . "\n"; } I am interested in viewing the ...

phphtmlvariables

Steps to reverting CSS attributes back to their default values for a specified element (or blocking inheritance)

How can you reset a specific CSS attribute of an HTML element, which is automatically inheriting styles from its parent, to the default value? For example: CSS: .navigation input { padding: 0; margin: 0 30em; } HTML <div class="navigation"& ...

htmlcss