setting the child div's margin in relation to its parent div

Here is my HTML:

<div class='mainDiv'>
    <div class='subDiv'></div>
</div>

This is the corresponding CSS code:

.mainDiv {
    margin-top: 200px;
    width: 700px;
    height: 800px;
    background-color: red;
}

.subDiv {
    background-color: green;
    width: 50px;
    height: 50px;
    margin-top: 22px;
}

View the fiddle here:

Why is the subDiv not receiving the margin-top of 22px? Currently, it only gets a margin top if the pixels are greater than the 200px given to the mainDiv. Is there a way to ensure that the subDiv receives a parent div of 22px relative to the mainDiv without resorting to some kind of hack like adding padding to the parent div?

htmlcssmargin

Answer №1

Perhaps this solution may be beneficial: Dealing with CSS Margins Overlapping Issues

Remember to specify the position property for both elements. Set the parent as relative and the child as absolute...

.parentDiv {
    position: relative;
    margin-top: 200px;
    width: 700px;
    height: 800px;
    background-color: red;
}

.childDiv {
    position: absolute;
    background-color: green;
    width: 50px;
    height: 50px;
    margin-top: 22px;
}

View the implementation in action here: http://jsfiddle.net/algorhythm/1whywvpa/5/

Answer №2

Seems the .childDiv is lacking a float left property.

By applying float: left; to the .childDiv, as demonstrated in this JS Fiddle example, the margin will be properly applied.

Answer №3

Avoid using margin in this scenario. Instead, apply padding to the parent div. Also, make sure to properly close your parent div. Remove the margin-top:22px from the child div and include padding-top:22px; on the parent div.

Answer №4

Set the child div to a percentage size based on the parent div:

.parentDiv {
    position: relative;
    margin-top: 200px;
    width: 700px;
    height: 800px;
    background-color: red;
    }

.childDiv {
    position: absolute;
    background-color: green;
    width: 7%;
    height: 6%;
    margin-top: 1%;
    }

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

If other options fail, Else If may not be a suitable choice

This is the process: switching from Issue: x==0||1 to x==0||x==1 etc. This code runs from an .html file <body> <div class="" id="pimg1"> </body><script> var x=new Date().getMonth(); if (x == 0||x == 5||x == 2){docu ...

javascripthtmlcsslogical-operators

Can you explain the distinction between angular input and native HTML attributes when used with HTML tags?

Take the input tag as an example, where you have two options to specify a maximum length: <input [maxLength]="20" type="text"> <input maxLength="20" type="text"> Are there any real-world distinctions between using one approach over the othe ...

htmlangular

Navigating the process of returning a list from an AJAX method to a view through a controller in ASP.NET MVC

I need to retrieve a list from my controller and pass it to the view. Currently, I have the following script: function fetchNames(_id, _name) { $.ajax({ type: 'Post', url: 'GetNames/', data: { id: _id, name: _name}, su ...

javascripthtml.netasp.net-mvc

Print media not affected by Bootstrap styling

Below is the code I am using to display a table within my application: var elementToPrint = this.mainTable.get(0); newWin = window.open(""); newWin.document.write('<html><head><title>' + elementToP ...

jqueryasp.netcsstwitter-bootstrap

Unusual glitch spotted on website in real-time, unexpected large circle suddenly materializes on Safari and Internet Explorer

I came across a strange issue on a live site and I need to find a solution quickly. After clicking on the "get a quote" button, a random giant circle with only a border appears on my page when loading a form via ajax. This odd occurrence is visible on Int ...

jqueryhtml

Is it possible to align divs so that they touch when they wrap to a new line, creating a grid-like appearance?

My React board component consists of an array of divs that I want to arrange in a grid-like map. The issue is, when the div wraps to a new line, there is significant space between each row. I aim to have the divs close together with no gaps. GameMap state ...

javascriptcssreactjsflexbox

Strange Safari 15 bug causing unexpected transformations

Hey there, I'm a div with animation on scroll using GSAP. On Safari 15 (no issues below 15), something strange is happening - parts of the letters are leaving an afterimage on the sides. The code snippet I am using for this animation is: this.$refs.l ...

csssafaritransformgsap

The background image does not appear on the animated div until the browser window is resized

Encountering an unusual problem - I have styled a div element using CSS to be initially hidden: .thediv { width: 100%; height: 87%; position: fixed; overflow: hidden; background-image: url(pics/FrameWithBG1280.png); background-attachment: fixe ...

jquerycssbackground-imagevisibilitywindow-resize

Adding query parameters to the end of every link on a webpage

Wondering how to automatically add GET values to the end of each anchor href on a webpage? For instance, if you input google.com?label=12&id=12 I want to ensure that "?label=12&id=12" gets added to the end of every single href in an anchor tag on ...

javascriptphphtml

Best practices for handling multiple tables in AngularJS HTML

How can I loop through multiple tables in AngularJS? Here is an example of my HTML code: <div ng-repeat="stuff in moreStuff"> <table> <h1>{{stuff.name}}</h1> <tr ng-repeat="car in cars"> <td> ...

htmlangularjs

What could be causing my border to spill over into the adjacent div?

Trying to set up the contact section of my portfolio but running into an issue where the border of one div is overflowing into the next. Here's a snippet of the code: //CSS .contact-cont { padding: 4rem 12rem 0rem; height: 90vh; ...

htmlcssreactjs

Tally up the values of selected checkboxes

  I'm in search of a method to tally up data-values associated with checkboxes. In the example provided below, selecting locations from the checkboxes results in the calculation of primary values, which are displayed in the green box. I also need to ...

javascripthtmljquerycssfunction

How to Preserve Scroll Position when Toggling a Div using jQuery

I've been struggling to find a solution for maintaining the scroll position of my page after a JQUERY toggle event. I've searched extensively but haven't found a fix yet. <script src="Scripts/_hideShowDiv/jquery-1.3.2.min.js" type="text/ ...

javascriptjqueryhtmlasp.netcss

Struggling to get the nth-child selector to function properly in IE8

Looking for a solution to alternate colors in a table? Here's what I tried: #grid tr:nth-child(odd) { background-color:#eee; } #grid tr:nth-child(even) { background-color:#fff; } Unfortunately, this works in Firefox but not in IE8. After some i ...

cssinternet-explorer-8css-selectors

Leverage htaccess functionality to modify website configurations without altering the URL

I currently have the following htaccess configuration: <IfModule mod_rewrite.c> RewriteEngine On RewriteRule ^(.*)$ dl.php?id=/$1 [QSA,L] </IfModule> It works perfectly fine. However, I am facing a problem with my site URLs and images ...

phphtml.htaccessmod-rewrite

Simply close by clicking outside using basic vanilla JavaScript

I have successfully implemented a menu that closes (removes the added class) when clicking outside the menu button area. Although it is working fine, I am unsure if my code is correct. My understanding is that the click outside functionality should only b ...

javascripthtmlcss

Should we make it a routine to include shared sass variables in each vue component for better practice?

Within my Vue application, there are numerous components that rely on shared variables like colors. I'm considering having each component import a global "variables.scss" file. Would this approach have any adverse effects? ...

cssvue.jssass

I possess a solitary div element that requires dynamic replication

I have a single container and an unspecified number of rows of data. I want to display this data on HTML cards that are generated dynamically based on the number of rows. For example, if there are 10 rows of data, I need to create 10 card elements with ea ...

javascriptphphtmlcssdisplay

Populate Select2 with default value using knockout.js

I'm working on a Knockout.js web application that includes a select2 dropdown. My goal is to bind both the id and text values to a variable, not just the id itself. Here's the data I'm working with: var vehicles = [{id: 1, type: 'Car&a ...

htmlselectknockout.jsjquery-select2dropdown

How about using a JQuery variable?

I'm a beginner in jQuery and I have this code snippet that displays a div when a specific link on a map is hovered over: <div id="locationmap"> <a class="linkhide" id="link1" href="#">Occupier 1</a> <a class="linkhide" id ...

javascriptjquerycssshow-hide