How to place a div within another div without using absolute positioning

I've been searching for a solution to this issue, but nothing seems to be working. I want the inner div to be positioned at the bottom of the outer div, with a 5px margin separating them. However, using absolute positioning disrupts the width and centering of the elements. Is there a way to achieve this layout without compromising these styles?

Below is my code snippet:

var height = $('.windows').height()*0.85;
$('.windows-content').css('height', height);
.windows {
max-width: 900px;
width: 70%;
min-height: 300px;
height: auto;
box-shadow: -1px -1px 0px 0px #000 inset, 1px 1px 0px 0px #FFF inset, -2px -2px 0px 0px #868A8E inset;
    background-color: #C2C5CA;
margin: 0 auto;
}
.windows-content {
width: 98.5%;
height: auto;
box-shadow: 2px 2px 0px 0px #000 inset, -1px -1px 0px 0px #FFF inset;
    background-color: #FFF;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="windows" id="home-window">
<div class="windows-content"></div>
</div>

jqueryhtmlcss

Answer №1

To achieve the desired outcome, utilize flexbox

Refer to code snippet below:

var height = $('.windows').height() * 0.85;
$('.windows-content').css('height', height);
.windows {
  max-width: 900px;
  width: 70%;
  min-height: 300px;
  background-color: #C2C5CA;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom:5px;
}

.windows-content {
  width: 98.5%;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="windows" id="home-window">
  <div class="windows-content"></div>
</div>

Answer №2

To tackle this issue, one effective solution is to include a padding-bottom in the .container division. Subsequently, you can define a JavaScript variable that captures the value of this padding. The updated value for the JavaScript height variable should be the original height minus the previously mentioned padding-bottom. In the code snippet CSS below, I have set the padding to 10px, but feel free to adjust it as needed.

var height = $('.windows').height();

$('.windows-content').css('height', height);

var bottom = height - 5;

var get_padding_bottom = parseInt( $('.windows').css('padding-bottom') , 10);

height -= get_padding_bottom; 
.windows {
max-width: 900px;
width: 70%;
min-height: 300px;
box-shadow: -1px -1px 0px 0px #000 inset, 1px 1px 0px 0px #FFF inset, -2px -2px 0px 0px #868A8E inset;
  background-color: #C2C5CA;
margin: 0 auto;
  padding-bottom: 10px;
}

.windows-content {
width: 98.5%;
height: auto;
box-shadow: 2px 2px 0px 0px #000 inset, -1px -1px 0px 0px #FFF inset;
  background-color: #FFF;
  margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div class="windows" id="home-window">
<div class="windows-content"></div>
</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 AJAX (jQuery) to process and refine JSON data through filtration

I need assistance with filtering a JSON array using AJAX but I'm unsure of how to proceed. { posts: [{ "image": "images/bbtv.jpg", "group": "a" }, { "image": "images/grow.jpg", "group": "b" }, { "image": "images/tabs.jpg", ...

javascriptjqueryjsonajax

Tips for dividing a div into percentages while maintaining a constant width for a div on the left side

I need help with creating a layout that involves 4 boxes. The first box (box1) should have a width of 50px on the left side, while the remaining 3 boxes should fill in the rest of the screen and be resizable. Can someone guide me on achieving this layout? ...

jqueryhtmlcss

Rearrange the sequence of specific child elements within the Div

Is there a way to reverse the order of specific div's children elements using just CSS? For instance: I need <div id="parent"> <a>A</a> <a>B</a> <a>C</a> <a>D</a> &l ...

htmljquerycsstwitter-bootstrapbootstrap-4

What caused Safari to only show half of the page?

Whenever I browse my website using Safari, I noticed that if the total size of the content on the first page is less than 100vh, Safari ends up cutting off half of the page. To fix this issue, I added a CSS rule in the body setting min-height to 110vh wh ...

cssreactjsnext.jssafari

What is the best way to retrieve the textbox value when its associated checkboxes have been selected?

Upon selecting a checkbox and entering data into the linked textbox, upon submission I aim to reveal a form showcasing both the entered text and which checkboxes were selected. ...

phphtml

When clicked, the DIV expands to fit the size of the window

Is there a way to use jQuery to expand a div to full screen when clicked, and change the content or layout of the div? I have a small div on my webpage with text or images inside, and I want it to enlarge when clicked so it fills the entire window with m ...

jqueryhtmljquery-uicss

"Looking to add some flair to your website with a

I am trying to figure out how to place a 30x30px no-repeat background image in the top left corner of a 200px by 200px div, positioned 120px from the left and 50px from the top. However, I also want to ensure that the text inside the div is displayed on to ...

htmlcss

I'm struggling to concentrate and unable to type in the email field

Today while working on a website, I encountered something strange. In the footer section of the site, there is a quick contact form. However, I noticed that in Firefox, I am unable to focus on the email field. Surprisingly, this issue does not occur in Chr ...

javascriptcssdrupaldrupal-7drupal-webform

Accordion content in motion

After creating an accordion, I wanted to enhance the user experience by adding a transition effect whenever they click on the accordion header. Even though I included height: auto and transition in the accordion container, it did not seem to have any impa ...

javascripthtmlcss

Choose children from multiple forms with jQuery

Currently, I am working on a website that contains multiple forms, including both basic HTML forms and AJAX forms. I have implemented a validation system for inputs where if an input has a class of "required," the form will not submit if any required field ...

jqueryformscontains

Validating the existence of a file through HTTPS in Javascript

After attempting to retrieve the file using this code, I've encountered an issue - it works with HTTP requests but not HTTPS requests (which is what I require). function checkUrl(url) { var request = new XMLHttpRequest(); try { request.ope ...

javascripthtml

Improve the design of the email newsletter

Having some trouble coding a particular element in my email newsletter layout. This is the desired outcome: View Screenshot Here's what I currently have: View Screenshot Any idea what could be going wrong here? Check out the code snippet below: &l ...

htmlcssemailhtml-email

Sending multiple objects using Ajax and fetching them in PHP

I'm facing an issue with posting a form and an array to my PHP script. My current approach involves using the following code: var json_data = JSON.stringify(data_vendor); //array to be posted $.ajax({ url: &ap ...

javascriptphpjqueryajax

Incorporating an Angular 2 Directive within the body tag of an

My goal is to create a custom directive that can dynamically add or remove a class from the body element in HTML. The directive needs to be controlled by a service, as I want to manage the visibility of the class from various components. Question: How ca ...

javascripthtmlangulartypescript

Using jQuery to add a timed slide effect to an element

After the page loads, I want an element to slide left after 10 seconds without disappearing from the page completely. The goal is for it to move 200px to the left and then return to its original position when clicked. I'm unsure about how to set the ...

jquery

What is the best way to center my navigation bar without interfering with the mobile version's JavaScript functionality?

Just starting out with web development and stack overflow, so please bear with me if I struggle to explain the issue. I came across some JavaScript to make my website responsive on small screens (mobiles). However, I am having trouble centering my top nav ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

A distinctive web page featuring an engaging image backdrop: captivating content effortlessly scrolling beneath

On my website, I have implemented a background image with a fixed transparent header. When scrolling down, I want the main content to be hidden beneath the header. To achieve this effect, I used the -webkit-mask-image property. However, this approach affec ...

htmlcssimagescrolltransparency

Using jQuery to implement multiple FadeIn effects

Here is the code that I have written: $('.frame').each(function(){ $(this).click(function(e){ var id = $(this).attr('id'); e.preventDefault(); $('.active').removeClass('active').fadeOut(8 ...

jqueryhtmlfadein

Tips for making a Bootstrap dropdown submenu appear as a 'dropup'

I'm using a Bootstrap dropdown menu with a submenu that should drop upwards while the rest of the menu drops down. How can I achieve this? Here is the code snippet: <div class="dropdown"> <a class="inputBarA dropdown-toggle" data-toggle= ...

htmlcsstwitter-bootstrapdrop-down-menu

Here's a way to align big text in the center while aligning small text at the bottom

How can I position two text blocks on the same line in HTML, with one text block having a larger font size and vertically aligned in the middle, while the other text block sits lower to create a cohesive design? To better illustrate what I mean, I have cre ...

htmlcssvertical-alignmentfont-size