Rectangular divs with percentage-based width and height calculation are not displaying properly

I am currently experiencing an issue where two rectangular divs, which are supposed to be calculated using percentage based width and height, are not appearing on my webpage. Here is the HTML code I have in the body section:

<div class="brd"></div>
<img src="res/logo-art.png" alt="Logo Artwork" align="middle" width="100%">
<button class="btn btn-default" id="login">Login</button>
<button class="btn btn-default" id="register">Register</button>
<div class="brd"></div>

Below is the CSS code that corresponds with the HTML above:

.brd {
    position: relative;
    width: 100%;
    height: calc(50% - 315px);
    background: #606060;
}

Given that the height of the page is 854px, I calculated the height of each div to be 112px. The png image's height is 475px. However, despite these calculations, the inspector is showing that the height of each div is actually 0px.

htmlcss

Answer №1

There are times when I encounter issues with percentage based widths and heights on a div element not functioning as expected. To resolve this, I have found success in assigning width and height values to the parent of my div elements. For example, if your div.brd is a child of body, you can try the following:

html, body {
  width: {some_value};
  height: {some_value};
}

This simple adjustment should solve the problem.

Answer №2

.container {
    position: relative;
    width: 100%;
    height: calc(50% - 315px);
    background: #606060;
    height: -moz-calc(50% - 315px);
    height: -webkit-calc(50% - 315px);
}

Give this a shot. It should do the trick!

Answer №3

This solution wouldn't even work without calculating. It's recommended to use "vh" units (viewport height) when expressing the height in percentage of the screen:

.brd {
    position: relative;
    width: 100%;
    height: calc(50vh - 315px);
    background: #606060;
}

Check it out here!

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

When adding a border radius to an iframe, you'll notice delicate curved lines appearing on all four corners

I have implemented material UI's CardMedia component to display an Iframe with a embedded youtube link. To achieve rounded corners for the iframe, I set the border-radius to 30px. Although it successfully rounds the corners, it also introduces thin li ...

cssmaterial-uilinethinborder-radius

Unable to activate check box button by clicking on it

Hi there! I am having trouble with a checkbox button on my website. The button appears fine, but for some reason it's not working properly (it doesn't get unchecked when clicked). Can anyone help me fix this issue? I'm still learning HTML an ...

htmlcsstwitter-bootstrap-3

Obtaining the HTML content of a div element that has been retrieved through an AJAX request to a PHP script

My challenge is to fetch a dropdown menu from a server and then manipulate it using jQuery after loading. Although everything loads correctly, I am unable to interact with the dropdown items because they were dynamically added post AJAX response instead of ...

javascriptphpjqueryhtmlajax

An abundant array of options spread across numerous dropdown menus

I have been tasked by a client to do something new that I haven't done before, so I am seeking the best approach. The project involves creating a form with three dropdown menus where users can select from thousands of options. For instance: Users mu ...

phpjavascripthtmlajaxdrop-down-menu

The alignment of bullets in CSS property list-style-position is off

I'm encountering an issue with aligning the list items. I've been using the CSS property list-style-position: inside; Typically, the bullet points appear outside of the text, like this: https://i.stack.imgur.com/LcVB0.png This doesn't seem ...

htmlcss

Implement the color codes specified in the AngularJS file into the SASS file

Once the user logs in, I retrieve a color code that is stored in localstorage and use it throughout the application. However, the challenge lies in replacing this color code in the SASS file. $Primary-color:#491e6a; $Secondary-color:#e5673a; $button-color ...

javascriptcssangularjssass

"Creating visual art with processing in 2D using P5

Recently, I came across a webpage about rendering 2D objects in processing using JavaScript. Here is the link to the page: Upon trying out the example code provided on the page in a new P5 project, I noticed that the code structure looked like this: HTML ...

javascripthtmlprocessingp5.js

Modify the collapse orientation in Bootstrap

I would like the button to expand from the bottom when clicked and collapse back down, instead of behaving like a dropdown. <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_ ...

javascriptcssbootstrap-5

Replace Picture as you Scroll

Is it possible to swap images based on scroll position? For instance: When scrolling 100px, display img1.jpg When scrolling 200px, display img2.jpg When scrolling 300px, display img3.jpg Here's an example of what I'm looking for. Any suggest ...

javascriptjqueryhtmlcssskrollr

Handlebars template engine does not support query parameters

Below is the code snippet I am working with: app.get("/editar-equipo?:id", (req, res) => { const equipos = obtenerEquipos() let equipoSeleccionado for(let i = 0; i < equipos.length; i++){ if(equipos[i].numeroId === ...

javascripthtmlnode.jsexpressexpress-handlebars

Static Sidebar integrated with Twitter Bootstrap version 2.3.5

Currently, I am in the process of learning how to incorporate a fixed sidebar using Twitter Bootstrap 2.3.5. Below is a snippet of the code I have been working on: <div class="container"> <div class="row"> <div class="span4" id="sid ...

htmlcsstwitter-bootstrap

Troubleshooting issue with JavaScript sorting function failing to arrange elements in ascending

I'm having trouble sorting numbers in ascending order using JavaScript. Here's the code snippet: <h2>JavaScript Array Sort</h2> <p>Click the button to sort the array in ascending order.</p> <button onclick="myFunctio ...

javascripthtml

Is it beneficial to cater to users who do not have JavaScript capabilities on my website, considering that I am currently using JS links to

My website heavily relies on JavaScript for navigation, passing a parameter to always indicate the starting page and displaying it in a navbox for easy access back. Should I include both href links for non-JS versions and onclick links for JS-enabled vers ...

javascripthtml

A-Frame: Capturing sweeping panoramic images with code

I am exploring panoramic screen shot capabilities and came across some documentation on how to take screenshots in A-Frame using hot keys. However, I am wondering if there is a method to generate a panoramic screenshot automatically without requiring user ...

javascripthtmlthree.jsaframe

Guide on finding and replicating a particular string in HTML connected websites

Allow me to outline the issue at hand. By visiting the provided link, you will encounter a directory of html links containing stories by Aesop, each with its own moral. My goal is to extract and save only the strings that include "Moral of Aesop's Fab ...

javaphppythonhtmlperl

Maintain the original order of rows in the table while shuffling the columns they appear in randomly

I need help with my table setup. The left column contains words in English, while the right column has the same words translated into Korean. Is there a way to keep the rows intact while randomizing the order of the columns? Here's an example: <ta ...

javascripthtml

Issues with the functionality of the submit button (html, js, php)

Seeking assistance with a submit button functionality issue - I have a simple submit button that allows visitors to enter their email address. Upon clicking the button, it should add their email to a CSV file and display a pop-up thank you message. The pr ...

javascriptphphtmlsubmit-button

"Emphasize menu items with an underline as you navigate through the

I am using Gatsby with React and have a navigation menu with links. I would like to make it so that when a link is clicked, a border bottom appears to indicate the current page, rather than only on hover. <ul className="men" id="menu"> ...

javascripthtmlcssreactjsgatsby

Exploring Java Programming with HTMLEditorKit

Here is my source code: I am trying to change the font color using only CSS. This is how I am inserting HTML: <span class="tag1">I love <span class="tag2">apple</span></span><span class="tag2"> pie</span> When using ...

javahtmlcss

Sending information from ngRoute resolve to the controller

I am currently working on an application that utilizes ngRoute to create a Single Page Application. One of the requirements is to ensure that the view is not loaded until the data has been successfully fetched from the database. While I have managed to ach ...

javascripthtmlangularjsangular-servicesngroute