#outer-wrapper
{
background-color: #585858;
width: 200px;
height: 200px;
}
#inner-wrapper
{
background-color: #111858;
width: 50px;
height: 100%;
}<div id="outer-wrapper">
content 1
<div id="inner-wrapper"></div>
</div>If I want to set a remaining height of the outer div to the inner div, how can I achieve that? The issue arises when I assign 100% height to the inner div, making its height equal to the outer div.
Your inquiry is a bit unclear, however, it seems that utilizing flexbox may be what you're looking for.
p {
margin: 0;
}
.external {
background-color: rgba(255, 0, 0, 0.5);
width: 200px;
height: 200px;
display: inline-flex;
flex-direction: column;
margin: 10px;
}
.internal {
background-color: #111858;
100%;
flex: 1;
}<div class="external">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="internal"></div>
</div>
<div class="external">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum quia tempore! Sit, laboriosam, quam.</p>
<div class="internal"></div>
</div>Try using this technique to improve your design.
<style>
#wrapper
{
background-color: #393939;
width: 250px;
height: 250px;
}
#inner
{
background-color: #222333;
width: 60px;
height: calc(100% - 30px);
}
.text
{
height:30px;
}
</style>
<div id="wrapper">
<div class="text">text here</div>
<div id="inner"></div>
</div>Currently, I am in the process of developing a search form that includes a dropdown menu. The functionality involves selecting an item from the dropdown menu triggering an AJAX call to another PHP file. This call returns tags which resize both the dropdown ...
As I delved into web development, my fascination with positioning grew. In the beginning, my novice websites were structured like this: <body> <h1> Welcome to my website. </h1> <br> <br> <br> <br> <br> ...
<template> <div class="flex justify-center"> <div class="h-px-500 md:w-1/6 bg-orange-200 text-center">1</div> <div class="h-px-500 md:w-1/6 bg-orange-300 text-center">2</div> <div class="h-px-500 md:w-1/ ...
I'm attempting to design a header using bootstrap 4 that resembles the image shown https://i.sstatic.net/MFVZU.png. However, I'm encountering several issues with this method. The main problem is that the logo is not properly centered in the middl ...
<img src="purplemoon.png" alt="Purple moon" id="moon-photo" /> <table> <tr> <th colspan="4">Control panel</th> </tr> <tr> <td> <!-- attempting to retrieve value from the input field ...
Here's the code snippet I've been working with: if ($('body.page-service-map').length || $('body.page-contact').length) { $(document.body).append('<div class="black-overlay"></div>'); ...
After thoroughly researching this topic, I am still stumped as to why my Placeholder is not appearing. I would greatly appreciate any insights or expertise you can provide to help me understand what I might be doing incorrectly. <input type="text" name ...
I'm currently working with two HTML forms and two PHP scripts. The first form is designed to save a user's email to a .txt file, while the second form is a Stripe payment form that processes payments using PHP code. However, I've encountere ...
I'm currently working on a .cshtml page where I display database objects in a card format using HTML and Bootstrap. However, the cards are appearing unevenly as shown below: https://i.sstatic.net/LbrrH.png Here is the code snippet I am using: @model ...
I've been searching for a solution, but so far nothing seems to work for me. I have a page with header and content sections. The content section is currently not visible. When I click on an item in the navigation menu, I want to hide the header and di ...
Trying to implement code for user details submission with pre-checked radio buttons and select tag showing proper values. Currently facing issues with radio buttons not staying checked after form submission without filling all details, and the select tag ...
On my form submission page, I am trying to call a function at the time of form submission, including an AJAX request. The form submission should occur or not based on a condition in the AJAX response message. The AJAX message can have two values: 1 and 0, ...
Issue: The Bing maps API I incorporated into my assignment is loading unnecessary CSS and scripts, causing a noticeable decrease in my lighthouse scores. Is there a way to prevent third-party code (such as Bing Ads) from loading when fetching the maps for ...
I'm dealing with an issue regarding a simple ol list in a div: <div class="one">Title<hr width="200px"> <ol> <li>One</li> <li>Two</li> <li>Three</li> </ol> </div> Here's the CSS ...
We are utilizing Angular.js combined with Bootstrap, and there is no jQuery included in our project. I am interested in implementing animate.css to create a fading effect for elements on the page as users scroll up and down. I came across an example that ...
Looking to create a rating system using Angular. The square should turn green if there are more likes than dislikes, and red vice versa (check out the stackblitz link for reference). Check it out here: View demo I've tried debugging my code with con ...
I've been working on a project using django 1.7, and below is my settings.py configuration: STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, "assets"), ) STATIC_ROOT = "absolute/path/to/static" In the 'assets&apo ...
I'm struggling to ensure that the text stays contained next to the image. It's working fine on desktop and tablet, but I'm facing challenges with mobile. While I have managed to improve it slightly, I can't figure out what exactly I am ...
Currently, I am using the latest version of FireFox and IE8. In order to change the printing orientation, I utilized the following code in my CSS file: @page { size: portrait; } You can find more information about the @page property here. Although it i ...
Thank you for taking the time to review this. I have a dynamic dropdown list that changes its content based on a specific value (for example, "51") inputted into the JavaScript code on each page. Different pages display different lists depending on this va ...