Is there a way for a child div to inherit half the width and half the height of its parent div without using specific values or viewport units?
Is there a way for a child div to inherit half the width and half the height of its parent div without using specific values or viewport units?
If you're using CSS, one way to set the width and height of a child element is by using percentages of its parent's dimensions.
.parent {
height: 100px;
width: 100px;
background: red;
}
.child {
height: 50%;
width: 50%;
background: blue;
}<div class="parent">
<div class="child"></div>
</div>Another solution using Javascript:
To dynamically set the child element's dimensions, you can divide the parent's height and width in half.
var parent = document.getElementsByClassName("parent")[0];
var child = document.getElementsByClassName("child")[0];
child.style.width = parent.offsetWidth / 2 + "px";
child.style.height = parent.offsetHeight / 2 + "px";.parent {
height: 100px;
width: 100px;
background: red;
}
.child {
background: blue;
}<div class="parent">
<div class="child"></div>
</div>Set the width and height to 50%. This will utilize half of the parent element's dimensions.
Currently, I am utilizing Dompdf in my PHP project to generate PDF reports. However, I have encountered an issue where the HTML bootstrap code does not render as expected on the PDF document. Specifically, when viewing the grid on a smaller device, it coll ...
As I work on constructing a website, I wonder how WordPress allows its admin users to edit CSS styles through the website instead of accessing the css file directly via FTP. How exactly does WordPress load the CSS file? My assumption is that it somehow re ...
I'm having an issue with my code that submits a form when an option in a select box is clicked. The problem arises when I try to put it inside a loop, as it stops working. Can anyone assist me with this? Below is the code snippet causing trouble: &l ...
My current border has a vertical flow like this: https://i.sstatic.net/CdUm6.png (source: gyazo.com) However, I want the content to flow horizontally from left to right instead of top to bottom. When I apply float: left; to the controlling div, it resu ...
When examining the screenshot of the website, you'll notice a considerable space between the first and second rows of menu items. I'm aiming to minimize this spacing as much as possible. The following CSS pertains to this issue: .gva-navigatio ...
Currently, I am facing an issue with two images not displaying correctly on a website that I am working on. The problem seems to be specific to IE 9, as other browsers are working fine. The trouble arises when I try to create a slideshow with a shadow back ...
I have built a basic webpage to explore jQuery. However, there is an issue that arises when I click on the "Button: another one." It seems to interfere with the event of clicking on the li element, causing it to glitch and not respond. Here is the code: JS ...
I have a scenario where I have dynamically added several divs with a specific class to my webpage. These divs change color when the user hovers over them. I am trying to trigger a specific function once the last div has been set to a particular backgroun ...
I've been exploring ways to create a container with 4 images aligned next to each other, accompanied by a button beneath each image. My goal is for the layout to be responsive, meaning that as the screen size adjusts, the elements inside should also a ...
My Bootstrap row contains a variable number of columns determined by a CMS, sometimes exceeding the space available on one line. I am looking for a way to neatly display all the columns with equal heights. <div class='row'> <div cl ...
I have developed a custom Web Control that acts as a container for a mobile banner, but I want to hide it from users who are admins. So far, I've attempted the following: <mob:MobileBanner runat="server" ID="MobileBanner" Visible='<%# Not ...
Is there a way to combine form-control and input-mini classes in order to create a SELECT element with a width of around 60px and a height of approximately 20px? <select id="RoleSelect" class="form-control input-mini { width: 60px; }" runat="server"> ...
I have a primary container with the following CSS: .major { width:30%; height:100%; position:absolute; } Now, I want to insert web information at the bottom part which includes: About | Terms | Policies | Contact Us This content will be within the .web ...
<div class="reviews-summary__stats"> <div class="reviews-summary"> <p class="reviews-title">A</p> <ul class="rating"> <li class="rating__item r ...
I'm struggling with adjusting the whitespace between 'Job Role' and 'Company Name' in my grid layout. Here's a snippet of what I have: The container css is set up like this: .experience-child { display: grid; grid-tem ...
Is it possible to initiate dragging on mouseover instead of click? Imagine a div that instantly starts dragging when hovered over. How can this be achieved? I would appreciate any guidance on how to make this happen. Thank you ...
Currently delving into Vue2 for the first time and facing hurdles with routes. Ever since I inserted <router-view></router-view> in index.html, an exception has been popping up: [Vue warn]: Failed to mount component: template or render functi ...
I am attempting to make the div full width while also implementing a slideDown/Up effect. I am struggling to identify the specific CSS needed to adjust the width accordingly. Currently, this is what I have: I can see that the class open is dynamically ad ...
In my asp.net mvc application, I am facing an issue where the * symbol, representing a required field, and the ? symbol, representing help, are not both being displayed. The ? symbol seems to be overriding the * symbol, resulting in only one symbol being s ...
I am currently working on creating a list of "fake videos" which are essentially images with a play icon on them. My plan is to use the play icon as a background and bring it to the front of the image by adjusting the z-index. However, no matter what I try ...