Avoiding unnecessary white space when positioning HTML elements

I am working with two images, imgA and imgB. ImgA is 2000px high while imgB is 1000px high.

After placing them one after the other, I use relative positioning to move imgB up in order to overlap imgA.

Expectedly, the browser window should be 2000px high, but it seems that the browser allocates space for both images initially, making the total height 3000px. This results in a blank space of 1000px at the bottom of the page after imgB is moved up to overlap imgA.

How can I prevent this blank space from occurring?

Thank you

htmlcss

Answer №1

Disregard this

The reason for this issue is due to the images being block level elements. To prevent the browser from allocating space, simply add: display:inline-block to the second image. By doing so, the image will no longer be part of the block structure and the browser will not allocate whitespace for it.

Another helpful resource is Relatively Absolute positioning, which can be useful for your project.

UPDATE

As mentioned in the comments, the previous solution does not work. It is recommended to use Relatively Absolute positioning instead.

For a demonstration of how to position an image over another, see this jsFiddle example.

Answer №2

To overlay imgB over imgA, apply display: block to your images and then use position: absolute instead of position: relative.

Remember to set the parent element to a value other than position: static in order to ensure that the image is positioned relative to its parent element.

Answer №3

If you need more explanation, examples of "css block" can be found here:

Answer №4

Absolute positioning is a targeted approach for certain situations, but it may not be the most effective solution in every similar scenario (for instance, when dealing with overlapped elements within the main container div).

Personally, I find that utilizing

margin-top: -800px;

for the second image offers a more optimal resolution.

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

Styling elements with CSS and using it to toggle the visibility of divs based on radio

When the radio button #my102 is selected, the div #navi102 should be visible and all other #navi??? divs should be hidden. Similarly, if the radio button #my7 is selected, the div #navi7 should be visible and others hidden. What would be the best approach ...

htmlcss

Managing the placement of the expanded autocomplete input in Material-UI

Whenever I use the autocomplete fields on my website, I've observed an interesting behavior. When I select multiple options, the height of the input increases significantly, causing everything below it to shift downward like this. Is there a way to m ...

javascriptcssreactjsmaterial-ui

First-character styling not applying to ID in CSS

My CSS :first-letter selector is effective on all p elements, however when applied to a span with the id #fletter, it doesn't seem to work... #fletter span:first-letter { font-weight: 600; font-size: 25px; } <span id="fletter"> The : ...

htmlcsscss-selectorspseudo-element

Issues arise with Bootstrap's navbar dropdown menus, rendering them inoper

Currently I am developing a bootstrap website using the "Butterfly" template. Everything is functioning properly except for the navbar when viewed on mobile devices. The dropdown menu fails to open on mobile devices, and I suspect it might be related to th ...

htmlcsstwitter-bootstrapdrop-down-menunavbar

The wrapper is failing to extend the full height of the entire page

Initially, I thought setting the height of my wrapping div to 100% would be a quick task that I could complete in five minutes. However, it ended up taking me hours, so now I'm here hoping someone can assist me with this commonly asked question. The ...

htmlcsscss-position

What is the most efficient way to print multiple JSON arrays simultaneously?

When looping through a database using an array, the following code snippet is used: $checkedProducts = $request->input('products'); $p = null; foreach($checkedProducts as $checkedProduct){ $p .= DB::table('products')->where( ...

htmlarraysjsonlaravel

Achieving consistent hover effects in both Firefox and Chrome with CSS

Currently, I am faced with a dilemma regarding some CSS hover effects and table formatting. Despite successfully implementing most aspects of the design, there is an issue with how different browsers interpret padding within elements during color changes o ...

cssgoogle-chromefirefox

Is it possible to perform a PHP redirect after the headers have been

I am encountering an issue with a function that needs to redirect the page once a variable is set. The challenge arises from the fact that this function is located at the bottom of the PHP page. As a result, I have already displayed a significant amount ...

phpjavascripthtml

Using regex in PHP to wrap the <ul> tag with <div> is a useful technique

My html snippet looks like this. <ul style="margin-left: 240px;"> <li>One</li> <li>Three <ul> <li>dfdf</li> </ul> </li> <li>dfds</li> </ul> ...

phphtmlregex

Modify the class's height by utilizing props

Using Vue 3 and Bootstrap 5, I have a props named number which should receive integers from 1 to 10. My goal is to incorporate the number in my CSS scrollbar class, but so far it's not working as expected. There are no error messages, it just doesn&a ...

javascriptcssvue.jsvuejs3bootstrap-5

Conceal the calendar icon from the date-type HTML input field specifically on the Firefox

The situation at hand is quite straightforward. <input type="date /> When viewed on Firefox (both desktop and mobile), it appears as follows: https://i.stack.imgur.com/S2i0s.png While the internet provides a solution specifically for Chrome: ...

htmlcss

Switching an :active class using ReactJS

Currently, I am working on creating an onboarding screen where the user is required to select three or more items. Once the user clicks on an item, a purple overlay should remain visible. For reference, this is what I have in mind: Sharing my code snippe ...

javascripthtmlcssreactjs

Can CSS be altered dynamically in Laravel blade?

Is there a way to dynamically change CSS? I am trying to set the class=sheet padding-top: 28mm; when the size of $anArray is less than 30. If the array has more than 30 elements then apply padding-top: 28 * 2 mm;. Finally, if the array exceeds 60, use pad ...

javascriptcsslaravel

creating a table displaying data in a horizontal format sourced from ajax/json transformation

I am currently working on a piece of code that retrieves a list of IDs from local storage and compares them to IDs in a JSON file. If there is a match, the corresponding data is displayed in a table. However, I am facing an issue with my table layout as i ...

jqueryhtmlajax

Issue with maintaining fixed space above navbar in HTML/CSS code

I'm struggling to make my navbar sticky on my website without any space above it. Can someone help me with this issue? Here is the URL to my site: My CSS looks like this: body { font-size: 12px; line-height: 22px; font-family: Arial, H ...

htmlcss

I am seeking a way to conceal text in an HTML document using JavaScript when the browser window width is less than a specified amount, and reveal it when the window width exceeds that value

I attempted to use the window.screen.width method, but it appears that the script only runs once (upon page load). I am seeking a way for the code to run continuously. Below is my JavaScript snippet: var textinSelected = document.getElementById("se ...

javascripthtml

Step-by-step guide to keep a table row always visible at the top of the

Is there a way to make the first row in a table with only td elements fixed (labels)? The table structure is as follows: <table> <tr> <td>Name:</td> <td>Age:</td> </tr> <tr> <td>John& ...

htmlcss

Is it possible to highlight only a specific color on the div background?

I'm trying to create a layout similar to this: I've managed to get most of it working, but I'm struggling with the yellow rectangle that spans the background of the screen. Currently, it looks like this: The issue is that the rectangles ar ...

htmlcssreactjs

Ensure this div adapts to different screen sizes

I have attempted using a width of 100%, but unfortunately, it did not result in a responsive design. To illustrate my point, here is the link to what I am striving to achieve in terms of responsiveness: codepen link div { background:url(https://i.stac ...

htmlcss

The delete function is not functioning

I need help with implementing a custom Angular directive that includes a delete button to remove itself. When I click the button removeMe, it is not deleting an item from the array. Any suggestions on what might be causing this issue? HTML: <button t ...

javascripthtmlangularjs