Building Nested Div Tags

I'm struggling with creating nested divs similar to the layout shown in the linked image. Image

Could someone please assist me in achieving this?

  .demo-container {
    padding: 30px;
    border: 1px solid #e2e4e7;
    background-color: #f5f7f8;
    text-align: left;
    display: inline-block;
    vertical-align: top;
  }
  .header {
    display: block;
    padding: 15px 25px 0;
    overflow: hidden;
  }
<div id="warp">
  <div class="header">
    New Alerts
  </div>

  <div class="demo-container">
  </div>
</div>

asp.nethtmlcss

Answer №1

In order to properly adjust the size of your parent container #wrap, you must specify both the height and width properties. Refer to the complete example provided below:

Complete Example

* {
  box-sizing: border-box
}
#wrap {
  height: 200px;
  width: 200px;
  text-align: center;   
}
.header {
  display: block;
  padding: 15px 25px;
  background: blue;
  color: white;
}
.demo-container {
  width: 100%;
  padding: 30px;
  border: 1px solid #e2e4e7;
  background-color: #f5f7f8;
  display: inline-block;
  vertical-align: middle;
  color:black;
}
<div id="wrap">
  <div class="header">
    New Alerts
  </div>
  <div class="demo-container">
    X Alerts
  </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

JavaScript effectively divides multiple child dropdowns with the main dropdown, thanks to Bootstrap innovation

I have implemented a jQuery function to dynamically change multiple child dropdowns based on the selected value of the main dropdown. For reference, you can view the image here. However, I encountered an issue when applying the Bootstrap styles "form-con ...

javascriptjqueryasp.net.nettwitter-bootstrap

Tips on utilizing innerHTML or innerText to add content to the Evernote editor, a rich text editor

A method authored by Jayant was employed in this particular post how-to-insert-text-into-the-textarea-at-the-current-cursor-position to perform an insertion into the Evernote editor. The Evernote editor being a rich text editor, altering from el.value to ...

javascripthtmlevernote

having trouble getting jQuery .submit() function to trigger

I am having trouble getting jQuery's .submit() function to work on my form. I have successfully tested an alert when placed within $(document).ready(), but I cannot seem to get it to trigger on form submission. Here is the script I am using in the BO ...

jqueryhtmlbootstrap-4

Is there a way to incorporate a subtle fading effect when transitioning between images?

I find this continuously changing image every 5 seconds to be a bit overwhelming without any smooth transition. Is there a way I can implement a short fade effect like what is possible in CSS? import React, { useEffect, useState } from "react"; ...

javascripthtmlcssreactjs

Having trouble with the Slide Menu Javascript functionality

Having some trouble creating a sliding menu with jQuery. Errors on lines 5 and 6 saying functions are not defined. Can anyone help me figure out what's wrong with my code? jQuery(function($) { "use strict"; $(document).ready(function () { ...

javascriptjquerycssmenuslide

Are there any CSS styles available for targeting an element with any id?

I need to style h2 tags in HTML documents that have an id attribute, without styling the ones without an id. I want to achieve this using only CSS and not by modifying the HTML structure. Specifically, I want to target these h2 elements with a CSS rule: ...

htmlcss

Can you explain the process of performing subtraction with parseInt in JS using Ionic 5 and Angular?

Currently, I am developing a point-based question game using Ionic 5 with Angular. Previously, I sought assistance on getting the addition button to function correctly and it worked perfectly. However, when attempting to implement the same logic for subtra ...

javascripthtmlangularionic-frameworkparseint

What is causing this npm error to occur, and what steps can I take to resolve it?

I am currently in the process of integrating a PayPal system into my HTML website. To do this, I am following a tutorial that can be found here: https://www.youtube.com/watch?v=DNM9FdFrI1k&list=PL4eNesgScjZb3oktJK1786zI4nSET_tas&index=4 At 9:10 in ...

htmlnpmpaypal

Whenever I press the BACK button, my localStorage gets wiped out, a phenomenon that occurs across all

I have integrated localStorage to store some non-essential data that enhances user experience without affecting the application's functionality. Issue: Whenever I navigate from the show page back to the INDEX page using the BACK button, all my local ...

javascriptjqueryhtmllocal-storage

How can I implement socket.io with multiple files?

I'm encountering an issue with Socket.io in my Express application. I am trying to have two .html files that can send messages to the server, but one of the files is throwing an error: Failed to load resource: net::ERR_FILE_NOT_FOUND add.html:26 Uncau ...

javascripthtmlnode.jssocket.io

Block users from viewing the image displayed within a JavaScript canvas

On my server, I have a path to an image that is accessed by a JavaScript to load the image onto a canvas. The script then proceeds to hide certain parts of the image using black layers. The issue arises when a user can easily view my JavaScript code, extr ...

javascripthtmlcanvas

HTML output does not match the response string in the TypeScript file

Utilizing Angular code to fetch values from a string array named response.resultData. It successfully retrieves most values, but encounters an issue when trying to display values that end with a comma and space. Example: Hydrocephalus in infectious and p ...

javascripthtmlangulartypescript

Nested foreach loops interacting with one another

I am attempting to execute multiple nested foreach loops and stop at 12 iterations, however the current code I have is not functioning as expected. While it displays the desired output, there seems to be an issue where only the first image in each director ...

phphtml

Implementing a click event handler in KendoUI date-time picker to trigger a function when navigating to the previous or next month

Is there a way to trigger an event when the user clicks on the previous/next month buttons in the Kendo UI date time picker? https://i.sstatic.net/ebLOw.png The documentation states that no event is triggered by default in this scenario, so I am attempti ...

javascripthtmljquerykendo-uidatetimepicker

Rotating Social Media Symbols - bootstrap 4

I am looking to incorporate a Social Button Footer similar to the one in this CodePen example: (https://codepen.io/vpdemo/pen/WbMNJv). However, my buttons are not appearing as circles. How can I rectify this? a, a:hover { text-decoration: none; } .soc ...

htmlcssbootstrap-4

The navigation bar's HTML hue

Currently working on a website design and looking to replicate the unique color gradient effect seen in the top navigation bar of Virgin America airlines' website (refer to the image linked below). Interested in any CSS/HTML techniques that could help ...

javascripthtmlcss

Step-by-step guide on accessing an ASP.NET MVC web application on a different computer using its IP address

I am trying to access my asp.net mvc website on another PC using: "" I have added the necessary codes to my iis applicationhost.config file, but it doesn't seem to be working. Any suggestions? <site name="PerfM" id="3"> <application ...

asp.netasp.net-mvc-4

When Ruby on Rails is combined with HTML and CSS and marked as selected, it will be displayed with

I'm currently in the process of developing my cookbook app and the next feature on my agenda is the grocery list functionality. Once on the recipe page, users will have the option to click on an "Add to Grocery List" link which will redirect them to a ...

jqueryhtmlcssruby-on-rails

Increasing the height of nested Bootstrap columns by stretching them out

I am trying to ensure that the first two columns in both the green and violet rows always have the same height. I initially thought of using d-flex align-items-stretch, but it seems like it is not working because those elements are not within the same row ...

htmlcssbootstrap-5

The height of a table cell in MVC cannot be altered

Could someone please help me with changing the height of table cells in MVC using Dreamweaver? I have already created the table with the following structure, but I am struggling to adjust the cell height. Any advice or tutorials would be greatly appreciate ...

htmlcsshtml-table