The nested div escapes from its parent div despite the application of clearfix and the correct positioning of relative and absolute elements

Hey there, I have a question about using relative and absolute positioning along with applying clearfix to the main container in my code. The layout is quite simple - a nav-bar with a drop-down menu at the top, followed by a hero image spanning the screen, some paragraphs, and a footer.

My issue arises when trying to place three elements within the hero image area - the hero image itself, a title word on the top left corner, and a logo on the top right corner. While everything looks fine on my 1280 x 1024 resolution screen, the logo gets misaligned on a wider screen (1680 x 1050).

I originally set the hero image as a background, used relative positioning for the main div, and absolute positioning for the title word and logo divs. Despite applying clearfix, they don't stay together as expected. Could this be due to a lack of code for responsive design or because of using a background image for the hero? Would using z-index to specify stack order fix this issue?

Below is the relevant code snippet. Any insights would be greatly appreciated!

<div id="history-content" class="clearfix">
    <div id="history-image-text">HISTORY</div>
    <div id="stamp">
        <img src="./images/logo.png">
    </div>
</div>



#history-content {
    background-image: url('./images/heroimage.jpg');
    min-height: 307px;
    background-repeat: no-repeat;
    position: relative;
}

#history-image-text {
    color: #fff;
    position: absolute;
    top: 20px;
    left: 50px;
    font-size: 20px;
    font-weight: bold;
}

#stamp img {
    width: 10%;   
    height: 40%;  
    float: right;
    position: absolute;
    right: 100px;
    top: 20px;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    line-height: 0;
}

Answer №1

Some key points:

  • Absolutely positioned elements are removed from the normal flow, so they do not impact the size of their parent element.
  • Because they are outside the normal flow, the float property does not affect them (at least to my knowledge).
  • Absolutely positioned elements adjust their size to fit their content unless a specific width and height are set or manipulated using properties like top, right, bottom, and left.

In this case, the parent div #history-content lacks a defined height, and all its contents are absolutely positioned, making it invisible (with a height of 0)

Setting a fixed height for the parent div seems to resolve the issue for mefix the issues

On another note: Contrary to initial assumptions, there aren't two absolutely positioned <div>'s in play. The #stamp img element is the one being absolutely positioned within the div#stamp. Consequently, div#stamp remains hidden (with a height of 0), with consistent results whether including it or excluding it. Also, when removing floats

Answer №2

It has been mentioned by others that float does not impact absolute positioned elements, so technically clearfix is not necessary in this scenario.

The reason why your logo appears outside the outermost container #history-content is unclear, but adding a border around #history-content could help troubleshoot the issue further.

EDIT: Have you checked if your hero image meets the dimension requirement of being smaller than 1608px in width?

<div id="history-content">
    <div id="history-image-text">HISTORY</div>
    <div id="stamp">
        <img src="./images/logo.png">
    </div>
</div>

I have made some changes to your CSS below

#history-content {
    background-image: url('./images/heroimage.jpg');
    min-height: 307px; /*set whatever minimum height you wish*/
    background-repeat: no-repeat;
    position: relative;
}

#history-image-text {
    color: #fff;
    position: absolute;
    top: 20px;
    left: 50px;
    font-size: 20px;
    font-weight: bold;
}

#stamp {
    display: block;
    position: absolute;
    right: 100px;
    top: 20px;
    width: 10%; /*set width of image in containter instead*/
    height: auto;
}

#stamp img {
    max-width: 100%; /*image width will not stretch beyond 100% of container*/
    height: auto;
}

JSFiddle: http://jsfiddle.net/5L9WL/3/

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

What is the process for adjusting the switch size in react-bootstrap?

I've been struggling to increase the size of the react-bootstrap switch without success. I searched through the documentation and tried various methods, but couldn't find a solution other than directly modifying the bootstrap css. Here's the ...

Dynamically resizing a property in the DOM with Angular

Could someone help me with an issue I'm having regarding resizing items on the screen in Angular when the browser window size changes? Here is my code snippet: // TS File height: number = 2.5; objHeight:number; screenHeight:number = window.innerHeig ...

JavaScript math validations not functioning correctly

This new project I've been working on involves presenting a multiplication problem and notifying the user if their answer is correct through an alert. The issue arises when the program incorrectly verifies the answers. Take a look at the code: < ...

How to use PHP for setting up a MySQL database?

Currently, I am immersing myself in the world of PHP and MySQL. I decided to take a shot at creating a basic HTML form along with a PHP script to set up a MySQL database. Unfortunately, when I tried to test it out, things didn't go as planned. Upon su ...

It is not possible to apply a background color to an HTML element located outside of the App.Vue

Hey there, thanks for taking the time to read my query! I am interested in adding a gradient background color to a specific page on my Vue application. I tried applying the following code in components/Frontpage.Vue: html { background: linear-gradient( ...

Is it possible to capture a screenshot of a YouTube video at a specific moment?

Imagine a scenario where we have a function called getScreenShot. We invoke it in the following manner: scrShot=getScreenShot(videoID, time, quality) This function is designed to capture a screenshot of the video at the specified time (e.g. 1:23) and in t ...

What is the best way to ensure my <h5> element fits perfectly inside its parent div vertically?

Currently facing an issue with finding a solution to my problem. The challenge involves having a header tag nested within multiple divs. Below is the structure: <div class="card"> <div class="layout-left"> <div class="card-header"> ...

Steps for disabling automatic formatting in Visual Studio Code Version 1.35.1 with system setup

I am currently utilizing visual studio code for my Node JS application with mustache templating. In one of my HTML files, I have the following code: <script> {{{interface}}} </script> After the automatic formatting on save, it appears like t ...

Python code displays output directly on an HTML webpage

I have created a basic Python chatbot that performs calculations and responds to user input. The chatbot continuously runs in Python, checking previous responses for context. I want to make this chatbot available online and achieve the following: Send us ...

Problem with CSS: The fixed footer is too wide when set at a width of 100%

I'm experimenting with using percentages instead of pixels and noticing some unusual behavior. Why is my footer extending to the right (beyond the "pagePlaceHolderInner" element)? It works when I assign a specific pixel value to both elements ("pagePl ...

I require adding a new line of information into the database table

I am looking for help with adding data into a table without any user inputs. Specifically, I want to add data by passing them into an array and then be able to call them at the "Add Site" button so that the row is added into the table. Can someone assist m ...

jQuery will envelop the HTML elements in an inconsequential div

Imagine a website that is visually complex, with various styles and images positioned in different ways. What if we wanted to add a small overlay icon above each image? At first, the solution might seem simple - just use absolute positioning for a span el ...

What is the best method for retaining just a specific portion of HTML code within Webbrowser VB.Net?

As a web developer accustomed to working with websites, I am now faced with the task of creating a Windows-based program using VB.net. In this project, I have two domains - A and B, where B is embedded within A using an iframe element. The code snippet for ...

What steps can you take to ensure that a pre-loaded swf file occupies the entire browser

Allow me to elaborate on my query. I am currently designing a flash website and utilizing a small external preloader swf to load the main swf. I have successfully configured the preloader swf to occupy the entire browser window, however, once it loads in ...

Chrome on IOS: Experiencing screen freezing while scrolling

1) I'm working with Material UI in React JS. I have added a simple scrollable code, but when I reach the bottom of the screen/scroll, it freezes. 2) I also tried it with a simple HTML page and it worked correctly. <div style={{ ...

Echo a JS variable into PHP and then insert a PHP file into an HTML element - a step-by-step guide!

Greetings to the wonderful community at stackoverflow, I am currently working on a variable code that allows for easy insertion of code from another file, such as a div. I am curious if it is possible to include a PHP file using JavaScript and JS variable ...

Dividing a pair of CSS stylesheets on a single HTML page

Currently, I am working on a HTML page that includes multiple javascripts and css files in the header section. <link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet" type="text/css" /> In order to make the website mobile-friendly, I s ...

Issue with Bootstrap 4 anchor links not leading to intended target

I recently built a one-page index page using Bootstrap 4, complete with a navbar containing hyperlinks that smoothly navigate to different sections of the page. For example, the "Events" nav link takes users to the section identified by id="events&quo ...

Trouble with Hero Unit Styles not being implemented

Looking to convert a PSD design to HTML using Bootstrap, but the hero unit is not displaying its default style as expected. <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> ...

What causes the size of text to change when I zoom in my browser?

As I work on my website, I am facing a challenge with maintaining consistent text size as the page scales. For example: p { width: 10%; height: 10%; background-color: rgb(0,0,0); top: 50%; left: 50%; position: fixed; color: rgb(255,255,25 ...