Imagine you have a div with specific height and width (as shown in the illustration as the innermost one), and you wish for the outer divs to encompass it, with an outer margin of 1 em. How could this be achieved?
+--------+
| +-----+|
| |+---+||
| || |||
| |+---+||
| +-----+|
+--------+
To achieve a specific layout, one option is to utilize the inline-block display style:
div { border: 1px solid blue; }
div.wrapper {
border: 1px solid red;
padding: 1em;
display: inline-block;
}
In the following HTML code:
<div class="wrapper">
<div class="wrapper">
<div style="width: 100px; height: 83px;">This</div>
</div>
</div>
Here's a demonstration link for reference: http://jsfiddle.net/redler/zSrXA/
Alternatively, you may experiment with using display: table-cell.
Presented here is a variation of Ken Redler's method that employs margin in place of padding (margin lies outside the border, while padding sits within).
div.interior
{
border: 1px solid blue;
margin: 1em;
}
div.exterior
{
border: 1px solid red;
margin: 1em;
display: inline-block;
}Check out this sample fiddle
Check out my solution below, utilizing position:relative:
HTML Code:
<div id="first">
<div id="second>
<div id="third"></div>
</div>
</div>
CSS Code:
div {position:relative;top:1.5em; left:1.5em}
#first {width:200px; height:200px; background:green}
#second {width:150px; height:150px; background:blue}
#third {width:100px; height:100px; background:black}
Live Demo: http://jsfiddle.net/abc123/
To see a demo of this concept in action, click on the link here..
<div class="spacing" id="box1"> </div>
<style>
.spacing
.spacing{
margin:1em;
border:1px solid blue;
display:inline-block;
}
#box1{
height:50px;
width:30px;
}
</style>
Next step would be to utilize jQuery for wrapping these elements accordingly..
$('#box1').wrap('<div class="spacing"/>').wrap('<div class="spacing"/>');
I am facing an issue while trying to integrate two CSS files into my website. The second CSS file seems to be ignored, even though both files are properly loaded when inspecting with the Development Tool in Chrome. Here is a snippet from my Header: <l ...
Currently, I am attempting to display two input boxes in a table when I select specific radio buttons and hide them if I choose another option. The code I have does work but has a minor issue, function disappear() { document.getElementsByClassName("ta ...
.cartBtn { appearance: none; outline: none; border: none; cursor: pointer; text-align: center; background-color: transparent; color: inherit; } .cartBtn:hover { color: black; } .cart { display: none; opacity: 0; transition: all 4s ea ...
I have chosen to use labels for my radio buttons because I enjoy the convenience of being able to click on the text to select the option. However, I want these labels to appear in a vertical list format. Currently, they are displaying as blocks, causing th ...
I've hit a roadblock while working on a project and can't seem to find the right solution. I've already created a design in Photoshop to illustrate what I'm trying to achieve: Photoshop Design. Basically, I want the main content inside ...
I'm currently at the beginning stages of learning Vue and am practicing implementing it. However, I keep encountering the errors "vue was used before it was defined" and "Vue is not defined". Below are excerpts from my HTML and JS files for reference. ...
I've got a JSON file with a list of data that includes months and years. I want to display all the months, but have the year only appear once in a big block area. Here's an image example: https://i.stack.imgur.com/Ps3OF.png The image demonstrates ...
I've developed a login system along with a CAPTCHA string that randomly generates characters in the form A1B2C3, containing uppercase and lowercase letters. Below is the code snippet: $cArr1 = array_merge(range("a", "z"), range("A", "Z")); $cArr2 = r ...
While developing an app with NextJS and Bootstrap, I noticed a strange dashed gap at the top of the screen in the elements tab. Despite checking for margin or padding-top properties on any element, there doesn't seem to be a clear cause for this issue ...
When attempting to create a navbar, I encountered small gaps that seemed impossible to close. Adjusting margins only resulted in new gaps appearing on the opposite side. Even when trying to find a compromise, I ended up with gaps on both sides instead. It ...
<h1>Lalan</h1> <input type="text" name="text" id="text" maxlength="12"> <label for="text"> Please enter your name here</label> <br><input type="submit" value ...
This is the script I am using for ajax: var cid = $(this).data('cid'); var sendData = { canidtoset: cid }; $.ajax({ url: '/functions/cv_showinformation.php', type: 'post', data: sendData, dataType: 'json ...
Could anyone assist me in finding a script that can change line breaks from a user's textarea input into HTML upon form submission to ensure that the formatting is maintained in our notification emails? Currently, I am encountering an issue where fie ...
My bootstrap navigation toggle does not seem to be toggling on click when the page shrinks. I have made sure to import the jQuery library first, so I'm not sure why it's not working. <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...
The bullets from the list-style type are not appearing. Despite the CSS code never declaring list-style-type: none, I have specifically declared list-style-type: disc for the section in question. I even checked with Firebug and other tools, and it is evide ...
I am currently developing a console/terminal feature for my website. https://i.stack.imgur.com/AEFNF.jpg My objective is to allow users to input commands and receive output, which might consist of multiple lines of information. When new output is displa ...
I have successfully uploaded a video using a node.js server and saved the FilePath to MongoDB in my /public/uploads folder. Within my ejs file, I am trying to display videos using the following code snippet: //Videos is an array of objects retrieved from ...
Most of you have probably noticed that images on Facebook come with a default background. How can I achieve a similar background color for images without using an additional div just for the background? My current codes do create a background color, but th ...
How can I align images with different widths when they are all floated right? I want them to be aligned vertically below each other. For the best display, please view in fullscreen on your computer as the example window is small. .compressor{ height: 1 ...
Here is the code regarding the issue at hand: <script> $(function(){ $('#widgetId-form input[name="valueType"]').change(function(){ if ($(this).is(":checked")) { console.log("enabling "+$(this).data("class") ...