I would like to create a space of 10px on each side of the #in div, similar to this layout:
Check out the code here - live demo:
html
<div id="out">
<div id="in"></div>
</div>
css
#out {
width: 700px;
height: 40px;
background: lightblue;
position: relative;
}
#in {
position: absolute;
width: 100%;
height: 20px;
top: 10px;
background: white;
margin: 0 10px;
}
Avoid using calc() and box-sizing. When positioning an element with absolute, set the left and right offset properties to 10px instead of specifying a specific width and margin on its sides:
#in {
position: absolute;
height: 20px;
top: 10px;
left: 10px;
right: 10px;
background: white;
}
To calculate 100% width accurately while accounting for the margin size, you can utilize the css calc rule:
#in {
width: calc(100% - 20px);
}
I trust this information proves useful to you.
Alternate Solution 1: Adding Padding
To simplify the CSS, you can just set the size for the outer div and add box-sizing: border-box to prevent the padding from affecting the width of the div.
#out {
width: 700px;
padding: 10px;
box-sizing: border-box;
background: lightblue;
}
No need for positioning the other div. Simply give it a height, and it will automatically stretch the outer div:
#in {
height: 20px;
background: white;
}
Click here to view the solution on CodePen
Another Approach: Using a Border
If your aim is to have a blue border, there's no necessity for two divs. Consider this alternative:
#out {
width: 700px;
}
#in {
height: 20px;
border: 10px solid lightblue;
}
In this scenario, you only require one div. Remove #out completely and transfer the width property to #in.
There are two divs with a button positioned above them. Initially, only one div, the catalogusOrderBox, is visible. When the button named manualButton is clicked, it should display the manualOrderBox div while hiding the catalogusOrderBox div. The text on ...
I successfully implemented a sidebar using the position: sticky property and it is functioning perfectly. To identify colors in the following text, refer to the script below. When scrolling, the black area remains fixed while the green area sticks to its ...
I've spent the past few days researching this issue. Here's some context to help explain the goal: I have a textarea and I want it to detect special characters (like @) that I define as part of a dictionary. It should then display an autocomple ...
In my quest to create a customized jQuery slider, I encountered the need to change the background of the slider handle. After experimenting with some code on this link, I am still unable to achieve the desired effect. Following the documentation, I have a ...
I have recently implemented Panels from Bootstrap 3 with the older version of Twitter-Bootstrap. My challenge lies in adding the well class to the panel body, as it results in excessive padding. This was not an issue when using BS3, leading me to believe ...
Does anyone know how to execute PHP code within an HTML file that is being opened inside a PHP file? Here's the scenario: I have an HTML file structured like this: <html> <head> <title></title> </head> ...
I've been attempting to automatically reload a page and fetch new data every 10 seconds, or even less. However, the codes I've tried so far have not been successful. Here is my current approach... // script // <script> $(document).rea ...
When I display the content on my website, it sometimes overlaps the footer because the wrapper does not adjust its size based on the content. I set the height to an absolute value and now I need to find a more flexible option to prevent this issue. I' ...
Struggling to align three circular divs on my webpage, here's the code: <div class="row"> <div class="large-9 push-2 columns"> <div class="green"></div> <a href="#">Donnez</a> </div> <div cl ...
I understand that it is usually recommended to add new objects at the end of an existing array without a name. However, I am interested in exploring a more complex scenario in order to learn. Specifically, I would like to add a new object at index [0] inst ...
I'm struggling with understanding how to merge cells in a table. Can someone explain the rules for merging table cells to me? I want to remove certain cells from the table without using CSS, I just want to make it look clean. <table border="1" ...
I need to extract the cost savings and frequency of interruptions information from the table on https://aws.amazon.com/ec2/spot/instance-advisor/ using Python. After inspecting the website using Chrome's 'Inspect' feature, I discovered that ...
Seeking advice on achieving a centered play button with borders in this layout. Struggling with flexbox to position the play button within the code provided. function Tasks(props) { const { classes } = props; return ( <div className={classe ...
Hello everyone, I recently came across a PHP Ajax Live Search example at this link and attempted to implement it. However, I encountered difficulties with the XML structure. Can anyone provide assistance in creating the optimal XML structure for this code? ...
One way to implement smooth scrolling to an anchor on page load is by using jQuery. Here's an example code snippet: $(function(){ $('html, body').animate({ scrollTop: $( $('#anchor1').attr('href') ).offset(). ...
I need help with implementing a code for two dropdown boxes. The first dropdown should display main category values dynamically, and when a value is selected, the second dropdown should appear with corresponding sub-category values. How can I achieve this ...
I have a piece of jQuery code that is not functioning as expected: $("#erase").click(function(){ $("#erase").attr("disabled", "disabled"); // Prevent double-clicking $(this).html("Erasing..."); $.post("erase.php", {target: $("#targ ...
I have created a dynamic object that shows both the date and time. My goal is to figure out how I can separate the time portion from the date so that I can place it in its own HTML element and style it differently? JavaScript isn't my strong suit, e ...
Can you group all adjacent <p> elements together within a <div> element? For example, assuming the following structure: <div class="content"> <p>one</p> <p>two</p> <h2> not p</h2> <p>thr ...
My goal is to pass the HTML variable from the list menu to the Perl script using POST. However, when I try to do this, the jQuery ajax() function executes the Perl script without including the value obtained from document.getElementById. Below is the sni ...