Expand the sibling html element to fill the entire parent container with css styling

Hey there! I recently ran the code below in this online sandbox and noticed that the elements ".title-wrap" and ".bg-wrap" are showing up next to each other. Do you know of a way to adjust the code so that ".bg-wrap" automatically fills the entire space of ".wrap" with minimal css edits?

Here is the code snippet:

<div class="wrap selected">
       <div class="title-wrap"></div>  
       <div class="bg-wrap"></div>
</div>        

And here is the corresponding css:

.selected .title-wrap{
    position:initial !important;
    text-align: center;
    height:29.42px;
    animation:titleAnimation .2s;
        -webkit-animation:titleAnimation .2s;
         -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes titleAnimation 
{
from {left:85px;top:5px}
to {left:25px;top:5px}
}

.wrap .title-wrap{
    width:202px;
    display:block;
    position:absolute;
    top:5px;
    left:85px;
    background:black;
}


.selected .bg-wrap{
    background:green;
    height:700px;
    width:100%;
    animation:bgAnimation .2s;
        -webkit-animation:bgAnimation .2s; 
         -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes bgAnimation
{
from {left:85px;top:35px;}
to {left:205px;top:0px;}
}

.wrap .bg-wrap{
    display:block;
    position:absolute;
    top:35px;
    left:85px;  
}

Answer №1

Although it wasn't clear what your intended goal was, I believe I have found a solution for you. I have also tidied up your code, making it more concise and easier to understand. Additionally, I have made updates to ensure cross-browser compatibility. You can view the updated JSFiddle with all the necessary fixes here: http://jsfiddle.net/mLh7r/34/

HTML:

<div class="wrap selected">
    <div class="title-wrap titleAnimation"></div>
    <div class="bg-wrap bgAnimation"></div>
</div>

CSS:

@-webkit-keyframes titleAnimation {from{left:85px;top:5px}to{left:25px;top:5px}}
@-moz-keyframes titleAnimation {from{left:85px;top:5px}to{left:25px;top:5px}}
@keyframes titleAnimation {from{left:85px;top:5px}to{left:25px;top:5px}}

@-webkit-keyframes bgAnimation {from{left:85px;top:35px;}to{left:0px;top:0px;}}
@-moz-keyframes bgAnimation {from{left:85px;top:35px;}to{left:0px;top:0px;}}
@keyframes bgAnimation {from{left:85px;top:35px;}to{left:0px;top:0px;}}

.titleAnimation {
    -webkit-animation: titleAnimation ease-in 1s;
    -moz-animation: titleAnimation ease-in 1s;
    animation: titleAnimation ease-in 1s;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;    
}
.bgAnimation {
    -webkit-animation: bgAnimation ease-in 1s;
    -moz-animation: bgAnimation ease-in 1s;
    animation: bgAnimation ease-in 1s;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;    
}
.wrap .title-wrap, .wrap .bg-wrap {
    position: absolute;
    display: block;
    left: 85px;
}
.title-wrap {
    position:absolute !important;
    text-align: center;
    height:29.42px;
}
.bg-wrap {
    height:700px;
    width:100%;
    background:green;
    z-index: -1;
}
.wrap .title-wrap {
    width:202px;
    top:5px;
    background:black;
}
.wrap .bg-wrap {
    top:35px;
}

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

Ways to minimize the loading time of contents within the Dropdown

I am facing an issue with the loading time of my dropdown list. When trying to load 100,000 items on button click, it takes too long. Is there any way to reduce the loading time? Looping through Products for (int i = 0; i < 100000; i++) { ...

Tips for crafting HTML emails that avoid users inadvertently selecting extra spaces while copying and pasting

There is an email that I send out with a specific string that needs to be copied and pasted only once. The issue arises when users copy the string from Outlook as they tend to unintentionally include an extra space at the end of it. Although I understand ...

styling the search input element in webkit with right-to-left text direction

I have included a search input in my code like this: <input type="search" placeholder="search" /> Webkit has different styles for an input field with the type 'search'. One of these styles is displaying a cancel ('x') button on ...

Is it possible to use one table as a background and place another table on top of it?

Currently, I am designing an email template and due to restrictions, I can only use tables. I am looking for a solution to meet my requirements using tables. Since all the content is dynamically generated via an RSS feed, images cannot be used in this ca ...

What is the best way to use CSS 3 to resize and enlarge an image, such as sprite icons?

Hello everyone, Picture this: a sprite image named icons.png linked to the css class .icons, featuring various 10x10px graphics. Now imagine needing another class that enlarges these sprite graphics exactly twice their size, making them 20x20 pixels on the ...

What is the best way to utilize a single component for validating two other components?

I am encountering an issue with my components setup. I have three components in total: GalleryAddComponent, which is used to add a new element, GalleryItemComponent, used to edit an element, and FieldsComponent, the form component utilized by both GalleryA ...

Text with gradient overlays

After successfully implementing a gradient effect on an image, I am facing the issue of it covering my text as well. I am struggling to locate the part of the code that needs to be modified in order to prevent the text from being obscured by the gradient e ...

Experience the full power of the bootstrap grid system with a unique feature: nested overflow-y scrolling

Struggling with the bootstrap grid and a nested div with overflow-y. I followed advice from this stack overflow post, attempting to add min-height:0 to the parent ancestor, but can't seem to make it work. View screenshot here - Chrome on the left, Fi ...

Is there a way to have a page automatically send you to a different URL depending on the information included in the link's GET statement?

I am in need of a straightforward piece of code that can automatically redirect a user to a different URL specified within the current URL: For instance: http://example.com/index.php?URL=anothersite The scenario is as follows: a user first lands on http ...

Equal-height list items in a multi-column unordered list

A multi-column unordered list has been created. Below is the HTML code: <ul> <li>Antelope</li> <li>Bison</li> <li>Camel</li> <li>Deer</li> <li>Eland</li> <li>Gazell ...

What are the steps to refreshing images on a webpage in HTML by clearing the cache?

After running this code, a series of images are generated in a specific folder that is used by the rest of the code. However, I noticed that the images only appear the first time or when I press ctrl + F5 to clear the cache. Is there a way to automaticall ...

What is the best way to modify this CSS code for use in a React Native

Encountering an issue while trying to apply this CSS property in a React Native project. border-radius: 50% / 100%; Attempting the following: borderRadius: '50% / 100%' An error message is displayed stating "Java.lang.string cannot be cast to ...

Utilizing the input element to modify the font color of the title upon clicking the button

I've been honing my skills in Angular and facing an issue with altering the font color of a variable called title. I'm struggling to figure it out. Take a look at the code snippet from tools.component.ts: [...] title: string = 'Add note ...

I am facing constant connection resets while attempting to upload a file to the Tomcat server

Exploring the creation of a website where users can freely post content has been an interesting journey. One challenge I'm currently facing is enabling users to upload files sequentially and send them as a multi-part request in ajax. Unfortunately, I ...

Customize default zoom settings with Cascading Style Sheets (CSS)

body{ margin-bottom: 10%; margin-left: 10%; width:80%; color: #264653; position: relative; } #photo{ border-radius: 70%; position: absolute; left: 25%; top: 50px; } .left1{ margin-top: 10%; background-color: #264653; width : 30%; ...

Attempting to prevent the use of the <p> tag solely before the text

My toggle function is not working correctly in my FaQ section. When a user clicks on a topic, the bottom section should appear, but the <p> tag is being displayed across the entire line instead of just one word.. Here is an image to help illustrate ...

Having trouble getting PHP to display an image on the webpage

When attempting to output a simple image using PHP, I noticed that it only displayed a white square. This led me to believe that the IMG file could not be found. However, when I used a basic HTML IMG tag, the file was located without any issues. Even try ...

Update Relative Links using JQuery or JavaScript

Currently, I am employed by a company that specializes in building websites using a specific platform. We have encountered an issue related to relative URLs within this platform. The platform exclusively utilizes relative URLs and I am looking for a way t ...

Is utilizing fixed-top/fixed-bottom with inner div elements set to a fixed height the most effective strategy?

I am working on developing an app similar to stackoverflow, with fixed menu and footer panels and an inner div that creates browser scroll as needed. I'm wondering if the code below is correct for achieving this setup. The classes fixed-top/fixed-bot ...

The enigmatic appearance of CSS border-image using a transparent image creates a visible edge when viewed

My website, located at , features a unique design element created using the CSS border-image property and a .png image with a transparent edge, giving the appearance of torn paper on the divs. However, I have encountered an issue specifically on my Android ...