I have a snippet of HTML code that looks like this:
<div id="outer">
<div id="inner"></div>
</div>
Is there a way to adjust the #inner div so it takes up 100% width of #outer but with a 10px margin?
This is my current CSS styling:
#outer {
width: 100%;
max-width: 500px;
}
To create some space around an element, apply a margin-left and/or a margin-right of 10px:
#inner {
margin: 0 10px;
}
Check out this example for more clarity: http://jsfiddle.net/xrmAE/1/
If needed, adjust the value from 10px to 5px.
IMPORTANT
Check out ThirtyDot's response for a solution that does not affect the overall width of the outer element:
How to achieve almost 100% div width
The following code will result in the total width of the outer element being the sum of the width and the padding on the left and right sides, which is not what the question is asking for. Apologies for any confusion caused. :)
To have the #inner element be 10px less in total, you can add a left and right padding of 5px:
<div id="outer">
<div id="inner"></div>
</div>
#outer {
width: 500px;
height: 500px;
background: red;
padding: 2px 5px;
}
#inner {
width: 100%;
height: 500px;
background: blue;
}
UPDATE
If you consider the use of the max-width property, see the following demonstration:
<div id="test">
<div id="outer">
<div id="inner"></div>
</div>
</div>
<p>
<input type="button" onclick="changeWidth('400px')" value="Change to 400px"/>
<input type="button" onclick="changeWidth('500px')" value="Change to 500px"/>
<input type="button" onclick="changeWidth('600px')" value="Change to 600px"/>
</p>
#outer {
width: 100%;
max-width: 500px;
background: red;
padding: 2px 5px;
}
#inner {
width: 100%;
height: 200px;
background: blue;
}
#test {
background: yellow;
width: 600px;
}
function changeWidth(width) {
document.getElementById('test').style.width = width;
}
How do you feel about setting the padding to 10px for the element with ID #outer?
After fetching a JSON file to fill my dropdown menu, I want each selected area to redirect to a specific URL. However, I'm unsure how to achieve this. Do I need to use JavaScript to trigger the onclick event for the URL? HTML: <div class="btn ...
I am facing a challenge with my .button class. When the button is in its active state, I have added an inset box shadow and increased the line-height by 2 to create a button press effect. However, the adjacent button and text below it also move down, which ...
Looking for a way to hide content in a Div if it's taller than 68px and display an expand option? The challenge lies in detecting the height of the responsive Div, especially since character count varies. I attempted using PHP to count characters bu ...
Within my database, there is a table named "train_information" which contains the following fields: train_id country_id user_id train_name tare_weight number_of_bogies number_of_axles wheel_diameter_min wheel_diameter_max In addition, I have developed t ...
My issue is the dynamically added div elements are not displaying horizontally within a container div element with a specific width. They always break into a new line. Below is the code snippet I am using: var i=1; $(document).ready(function () { ...
Prior to reading: Please note that if you are only interested in answering the question, you can skip ahead to "The Question" at the end of this post. My current project involves developing a feature for a website that enables users to upload and share pr ...
Currently working on building a responsive HTML page and facing a slight challenge. I have two divs that I want to display side by side. If the width drops below X, the second div should be hidden. This part is functioning as expected. However, when in ...
How do I resolve the address issue within the "require" function in my PHP code? I am receiving an error message that reads: Warning: require (..) failed to open stream: no such file or directory. https://i.sstatic.net/OQvQ6.jpg https://i.sstatic.net/pIR ...
How can I vertically align a blog entry title on an entry thumbnail image? The image size changes with the window size and the title varies in length for each entry. After finding a website that successfully achieved this effect, I tried replicating it us ...
I've been working on creating a website for my business but I'm facing a challenge. My goal is to have a fixed navigation bar that stays in place as people scroll down the page, similar to what you can see on this website: (where the navigat ...
I am diving into the world of website creation and hosting, embarking on a journey to share my code on Github and showcase it using Github pages. After setting up a new repository and uploading my project files including an HTML file, a CSS file, and an i ...
We recently developed a Progressive Web App (PWA) for our website and are now looking to customize the status bar font color to white. While we have come across various resources on how to change the background color of the status bar in a desktop PWA on ...
Having trouble with scroll spy for boosters using the body method " data-spy="scroll". It seems to be working for some browsers like Edge and Google Chrome, but after multiple attempts, it still doesn't work for me. Even after asking friends to test i ...
I recently completed a project where I created a user achievement page that displays their progress. Within the page, there is a table containing the user's level. The table structure looks like this: Users( id, username, password, sum_score, level) ...
My golden rule for media queries is set... @media only screen and (min-width: 768px) and (max-width: 1080px) { Strangely, I picked 1080 as a test number... Unexpectedly, the background color changes at 1190px when resizing my page to test breakpoints. ...
I have encountered an issue with the code I am currently using. I have a modified version of this code implemented on another page, where a textbox is used instead of a textarea. Interestingly, the textbox version works perfectly fine. However, on my cur ...
Check out my code snippet on JSFIDDLE: https://jsfiddle.net/8f3vLh0a/14/ I am using font awesome icons and I would like to add a circling effect on hover similar to this demo: http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/ How can I implement t ...
I am currently facing an issue in my code where I am trying to make one image fade in next to another, regardless of the position of the movable image on the screen. The movable image can be controlled using arrow keys, and when I move it across the screen ...
In the code snippet provided, there is a button in each row that serves two functions: expanding and collapsing the specific row where the button is located. <div class=""> <ul> <li ng-repeat="nav in ciRelationshipHier ...
While the div is focused, spell checking is enabled which works well. However, once the focus is removed and there are spelling mistakes, the red squiggle lines for spell checking remain visible. After following the advice provided in this query: spellch ...