Looking for advice on how to position two images within a div using percentages relative to the parent div.
Check out this fiddle for reference: http://jsfiddle.net/b9ce626s/
I experimented with setting position: absolute; on the image, but it seems to be based on the window width.
I specifically want the right image to be positioned at 95% of the red div's width, without being affected by the left image's positioning.
To ensure the images are positioned relative to #main, add position: relative to that element. This will prevent them from being based on the root element.
Example: http://jsfiddle.net/b9ce626s/1/
By giving a page element relative positioning, you gain the ability to absolutely position child elements within it.
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
Additionally, assigning a percentage value width to the images will now be based on the parent element's width.
Give this a shot...
HTML
<div id="main">
<img id="card1" src="http://dynamic-project.com/wp-content/uploads/2022/09/image.png" alt="KH" />
<img id="card2" src="http://www.example.com/images/icons/image.png" alt="9H" />
</div>
CSS
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#main {
display: block;
width: 50%;
height: 50%;
background-color: blue;
position:relative;
}
img {
position: absolute;
width: 10%;
}
#card1 {
left:10%;
}
#card2 {
right: 10%;
}
.content {
display: block;
width: 50%;
height: 50%;
background-color: blue;
position: absolute;
}
Make sure to include position: relative; in the main CSS like this:
#main {
display: block;
width: 50%;
height: 50%;
background-color: red;
position:relative;
}
By using this keyword, all elements will be laid out as if they were not positioned initially, and then their position will be adjusted without changing the layout. This leaves a gap for the element where it would have been if it had not been positioned. It's important to note that the effect of position:relative on certain table elements is undefined.
Currently, I am working on a function that will apply shadow effects to all buttons within a specific class when hovered over. However, due to the dynamic nature of the buttons created based on the data retrieved from the database, assigning individual IDs ...
Having trouble getting this to work on my website, especially in Internet Explorer. Check it out here: http://jsfiddle.net/b43hj/24/ Any tips on how to make it compatible with all browsers? Thank you edit - I've only used the code from the jsfidd ...
Having an issue with my CSS file for the Header.js module. Despite writing rules, only one style is applying. Can anyone help me identify the problem? Thanks in advance! Header.js component import React from 'react'; import '../../../asset/ ...
I'm looking to use the window open() function to display a default calibration image initially Then have the ability to switch out images from a gallery on the parent page whenever needed My coding skills are a bit rusty, and I'm struggling to ...
Currently, I am in the process of developing a payment page that enables payments through Paypal using Instant Payment Notification. The initiation of this process involves sending a POST request to Paypal via a submit button along with multiple hidden for ...
I'm working on a jsp page that contains a simple select html element. Right now, when I select an option and click the Wyswietl button, the page refreshes, the table data is refreshed, but the selected option resets to default... How can I make it sta ...
Attempting to create a checkbox that triggers one function when initially checked, and another when it is unchecked. I have tried the following approach. There is also a variable that has been read out and reflects the current status: <input type=" ...
Is there a method to randomly select hex codes for specific colors? I want to replicate the design in this image through coding. Image Here is the code I have so far: HTML <div id="group"> <div class="sub red panel"> </div><!--su ...
I am facing an issue with positioning the logo in the header section of my website. It appears correctly on the left side for tablet and mobile versions, but on desktop, it does not align to the corner as desired. I tried adding a right margin, but I belie ...
I am currently developing a multiple-choice form in my MVC5 app and I am struggling to find a way to disable unchecked boxes once a specific number of boxes have been checked. For example, if 3 out of 5 boxes are checked, the remaining 2 should be disabled ...
If I have this angularjs DOM structure <div ng-init="isRed = true" ng-class="{'red': isRed == true, 'black': isRed == false}"> ... content </div> How can I obtain the 'compiled' version of this on a cl ...
Is there a simple method to add an input text element with a clear icon on the right side, similar to the layout of the Google search box? I've searched, but I could only find instructions for placing an icon as the background of the input element. I ...
Within my current project, I have implemented validation features for text boxes. When a user clicks on a text box, the border is highlighted. If they click elsewhere without entering any value, the border turns red and an alert pop-up appears. In additio ...
I'm facing an issue with truncating text inside a table, and it's not working as expected. Can someone help me understand what I might be doing wrong? Edit: I need to ensure that the table width remains max-width: 100%; <script src="http ...
I have a webpage containing 5 images, each measuring 48px by 48px. I would like these images to be displayed in random positions on the page every time it is loaded. While I am aware that I will need to use CSS and JavaScript for this task (specifically f ...
I have a basic form where users can input data through drop-down selectors. There are 10 questions, each with a rating out of 10. The entered data is then used to generate a Google graph on the same page. Although the graph populates correctly, the axis ...
How can I swap the .glyphicon-menu-down to glyphicon-menu-up when a user clicks on a link? Currently, it's not working as expected. Could there be an issue with my jQuery implementation? Markup <a data-toggle="collapse" data-parent="#accordion" h ...
I have created a bootstrap responsive navigation menu that collapses into a box when the page is resized. It's a standard menu with bootstrap, but I'm facing an issue where the menu automatically appears when the page gets small instead of needin ...
While working with Python's BeautifulSoup to extract the previous price from an Amazon page, I encountered a problem where my code was displaying the current price instead of the previous one. This is the code snippet I tried: priceold = soup.find(cl ...
I am currently designing a blog theme and I would like to include a small box that displays the post date offset to the left of each post, similar to this mockup: My issue arises because the post container has overflow scrolling enabled, making it difficu ...