Is it possible to position two divs side by side, with one of them moving continuously up and down while containing an image?
I attempted the following code:
<div>
<div style="margin:30px;width:100px;height:250px;position:relative;float:left;background-color:red;">A</div>
<div style="margin:30px;width:100px;height:50px;position:relative;float:left;background-color:blue;">B</div>
</div>
Is there a way to make the B div move up and down?
Considering your question is related to CSS and not Jquery/Javascript, I will be using CSS keyframes animations for this solution. Please note that this method is not compatible with IE<=9.
div.boxB {
-webkit-animation: move 5s linear infinite;
-moz-animation: move 5s linear infinite;
animation: move 5s linear infinite;
}
@-webkit-keyframes move {
0% {
margin-top: 30px;
}
25% {
margin-top: 100px;
}
50% {
margin-top: 180px;
}
75% {
margin-top: 100px;
}
100% {
margin-top: 30px;
}
}
@-moz-keyframes move {
0% {
margin-top: 30px;
}
25% {
margin-top: 100px;
}
50% {
margin-top: 180px;
}
75% {
margin-top: 100px;
}
100% {
margin-top: 30px;
}
}
@keyframes move {
0% {
margin-top: 30px;
}
25% {
margin-top: 100px;
}
50% {
margin-top: 180px;
}
75% {
margin-top: 100px;
}
100% {
margin-top: 30px;
}
}<div>
<div style="margin:30px;width:100px;height:200px;position:relative;float:left;background-color:red;">A</div>
<div class="boxB" style="margin:30px;width:100px;height:50px;position:relative;float:left;background-color:blue;">B</div>
</div>To line them up side by side, adjust the margins to 0px for the right, bottom, and left sides.
<div>
<div style="margin:0 0 0 0;width:100px;height:250px;position:relative;float:left;background-color:red;">A</div>
<div style="margin:0 0 0 0;width:100px;height:50px;position:relative;float:left;background-color:blue;">B</div>
</div>There are two methods to accomplish this:
display:block in your style.float:right.To achieve the desired effect, you can utilize the CSS property display: inline-block and adjust the position of your B div using top and bottom values.
<div>
<div style="30px 0 0 0;width:100px;height:250px;position:relative;display: inline-block;background-color:red;">A</div>
<div style="30px 0 0 0;width:100px;height:50px;position:relative;display: inline-block;background-color:blue;top: 90px;">B</div>
</div>I've been working on a project that involves integrating an Instagram feed into a website. However, I'm facing difficulties getting it to function properly. Here's the code that I have implemented. <script type="text/javascript"> ...
I have an example on stackblitz where I am using @angular/cdk/drag-drop in my project. I am attempting to change the cursor to cursor:grabb and cursor:grabbing when the cursor is over an element and when I drag a picked element. Here is the CSS line I am ...
Is there an alternative way to fix the content on the header so that it remains visible on the screen until the next table, even when scrolling? I've tried using position: sticky and top: 0, but the header still scrolls past. I have checked for any ov ...
My task is to perform a POST request using the Python Request module. However, I am facing an issue where the input I need to work with only has an id attribute and no name attribute. Most of the examples I have come across involve using the name attribute ...
Can someone help me figure out why my navbar's height is different from the example on this Bootstrap navigation bar snippet? Here's the code I used: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_form&stacked=h I copi ...
How can I achieve 1 row with 12 cells on a large screen in Bootstrap, and for a smaller screen have 2 rows with 6 cells? Here is a visual representation of what I am trying to accomplish: https://i.stack.imgur.com/NgfaP.png This is the code I attempted: ...
I am in need of clarification on the use of different units for image dimensions. Despite my research, I have not been able to find a consistent answer. Some sources suggest using only rem/em instead of pixels, but I am unsure if this also applies to image ...
Looking to conceal a label using CSS <p class="half_form "> <label for="property_bathrooms">Bathrooms (*only numbers)</label> <input type="text" id="property_bathrooms" size="40" class= ...
Can anyone offer advice on speeding up the display of large tables with 500+ rows in Internet Explorer? Here is my current approach: The MySQL query result includes 500+ rows, which I then loop through using a while loop to display: echo "<tr class=& ...
I'm currently working on creating a combined 'Order Calculator / Order Form' using one php form. The calculator part of the form is functioning perfectly and accurately calculates the total for all 5 order options both on the live page and i ...
Looking for the XPath of this specific element: <a> href="/resident/register/">Register another device </a> I initially tried $x("//*[contains(@href, 'resident/register')]") Unfortunately, no results were returned. Any other su ...
Visit this website. When I click on log in, a User credentials form appears. If I try to login with missing Email Address or Password, I receive the following message: https://i.sstatic.net/j92cv.png To find this element, I tried printing all the page H ...
I'm struggling to make Autoprefixer work with Gulp. Despite using opacity, gradients, and transforms in my CSS, I can't see any vendor prefixes being added. However, everything else seems to be functioning correctly. Below is my gulp file: var ...
We currently have a static website consisting of all html files. In addition, we have a dynamic ASPX website with a specific page (RegisterAndBuy.aspx) that displays data based on user selections and collects personal information to send to the Admin via ...
I am attempting to showcase the countries from each continent on a single page using buttons for each continent. When a user clicks on a button, I want the countries of the selected continent to be displayed. However, I am encountering an issue where only ...
Is it possible to show selected options in mat-select with long strings in two lines within the same dropdown? Currently, the string appears incomplete. You can see an example of this issue here: incomplete string example <mat-form-field class="f ...
Hello everyone, I have a question regarding adding the string 'url(" ")' around my Any assistance you can provide would be greatly appreciated. Thank you! $(function() { $('#list li a').hover( function(){ $("#meow").css( " ...
Within my common header file, there is a navbar that includes a multilanguage dropdown menu. The issue I am facing is that when I select a language from the dropdown, the page translates correctly. However, when I navigate to other pages, the selected lang ...
I'm working with some code that looks like this: var iconContainer = document.getElementById('iconContainer'); var icon = iconContainer.getElementsByClassName("item"); for (var i = 0; i < icon.length; i++) { icon[i].addEventListener ...
I am currently working with NextJs@12 and I am attempting to set up CSP for my application. Unfortunately, I keep encountering errors in my console and I cannot figure out where I am going wrong. Below is the current policy that I have in my next.config fi ...