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.
Although this may seem like a minor issue, I can't find any information in the documentation. I'm currently using Google Charts treemap for monitoring a specific project. The problem I'm facing is that when all the parent level rectangles ar ...
Bookstore.html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> ul { list-style-type: none; padding: 20px; overflow: hidden; background-color: black; width:1230px; p ...
Currently, I am working on a PHP project that involves creating a table with Bootstrap styling. To achieve this, I referred to a tutorial which guided me through the process. After linking the necessary Bootstrap CSS file using the provided code snippet, ...
I have encountered an issue in my VSCode environment while working on a next.js project. Whenever I attempt to save the index.js file, the HTML syntax crashes. I am at a loss on how to resolve this issue, so any assistance would be greatly appreciated. Tha ...
I'm having trouble removing the bullet points from my navigation bar. I've tried using list-style-type: none and even adding !important, but it doesn't seem to work. Strangely enough, everything looks fine in Chrome, but I get an error when ...
After adjusting the height of my inputs (date type) to 40px, I noticed that the up and down controls are no longer aligned with the text inside the field. I am looking for a solution to either adjust the height of the spins or remove them if necessary in ...
I'm in the process of creating a website where each page will have its own unique background color. Additionally, I am using a PHP input for both the header and footer sections, which need to change their background colors based on the specific webpa ...
Every time I try to build a web application using 'yo webapp', I encounter a 404 Error. GET http://localhost:9000/styles/main.css 404 (Not Found) I removed compass from the project, but that shouldn't be causing the issue, correct? ...
Trying to concatenate the HTML text with the values of item.certificate_name has been a challenge for me. I've experimented with various methods, but none of them seem to work. The specific line I'm referring to is where I wrote . I have alread ...
Is there a way to modify the styling, such as color, of the input type date in HTML 5? In HTML 5, we can display a calendar using <input type=date>. For example, if March 23rd is a holiday and I want to highlight this specific date in red, how can I ...
When it comes to shaping text inside li elements, I've encountered a few issues. One of the problems is that the float-right divs aren't floating to the top right corner but instead leaving a space at the top. Additionally, the text isn't &a ...
As a novice, I am practicing by attempting to retrieve a number from a text field, prompting the user to click a button that adds 2 to that number, and then displaying the result through HTML. However, I keep encountering an issue where NaN is returned whe ...
Using Selenium's webdriverJS, I have automated tasks on an HTML5 page. To incorporate a CSS selector into a function, I had to rely on XPath for selecting elements: var complexXpath = "//*/div/a"; /* This is just an example */ var element = mydri ...
I'm working with 4 separate divs, with the last one acting as a footer. Is there a way to position this last div at the top using CSS? ...
The <img> element's srcset attribute seems to always select the larger <img> source, even when the size media query is false. I found success in using a <picture> element to ensure image selection based on browser width. Based on th ...
I'm having some trouble with my website's display in IE8. It looks great in IE9, Firefox, and Chrome, but in IE8 it appears all jacked up. I'm using WordPress with Thesis Themes and editing custom.css for my changes. You can view my site he ...
I've customized a table by changing the row color based on a property value, and I'm using ng-repeat to display the rows. Here's my table: <table class="tab table span6 tabhover" style="margin:0;" > <thead> ...
I am currently facing an issue with a dropdown menu that contains the list of products offered by our company. Specifically, one of the product names, Hotel Management Solutions, is appearing on multiple lines instead of a single line in the dropdown menu. ...
I'm currently working on a web project and have the following CSS and HTML code: style.css: body { background-color: red; font-size: 14px; font-family: Roboto,arial,sans-serif color: gray; } img { height: 92px; width: 272px; ...
Initially, here are my code snippets: In the HTML file: <div class="div parent"> Title <div class="div child"> <div class="overflowed"> </div> </div> </div> CSS Styling: .div { border: 1px solid #0000 ...