Positioning an absolute element inside a relative parent with a defined maximum width

I am attempting to position #header-supporter at the bottom right of #header-image, with overlapping elements. The challenge lies in setting a max-width of 1280px on #header-supporter-cont to maintain consistency with the site's margins.

I have tried placing #header-supporter directly within #header, but I encountered difficulties as max-width cannot be applied while keeping #header-image full-width.

This is the HTML markup I used:

  <header id="header">
    <div id="header-image">
      <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Header&w=1920&h=200" /></a>
    </div>
    <div id="header-supporter-cont">
      <div id="header-supporter">
        <div>
          Lead Supporter
        </div>
        <img src="http://placeholdit.imgix.net/~text?txtsize=14&w=65&h=65" />
      </div>
    </div>
  </header>

Check out this Pen for reference: http://codepen.io/ourcore/pen/ObBWaY.

htmlcss

Answer №1

Changed the position to relative for #header-supporter-cont and set bottom instead of top for #header-supporter

http://codepen.io/anon/pen/ENdWgE

 #header-supporter-cont {
  margin: 0 auto;
  max-width: 1280px;
  position: relative;

  #header-supporter {
    position: absolute;
    bottom: 0;
    right: 0;
  }

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

When trying to submit a form, encountering an `Uncaught ReferenceError` due to calling ajax within

Attempting to trigger an ajax function within a form in order to retrieve a value for the dropdown. mypython.py @app.route('/new_data', methods = ['POST', 'GET']) def new_data(): #Filter data and return the data(data_lis ...

javascriptjqueryhtmlajaxpython-3.x

What is the best way to eliminate the curved border and inset box shadow from the Material UI TextField component in React?

Check out this input field: https://i.sstatic.net/Z6URV.png Notice the inner shadow and curved borders. Take a look at the given code snippet: import React, {Component} from 'react'; import TextField from 'material-ui/TextField'; im ...

cssreactjsinputtextfieldbox-shadow

When hovering over one item, it causes a hover effect on an item in a SEPARATE container

My goal is to create a unique interaction between links and images, where hovering over a link will transform the corresponding image below it, and vice versa. I have been searching for solutions but have only found methods that work when all items are wit ...

htmlcss

I have noticed that the SVG viewBox appears different when using Vue.js

I cannot wrap my head around the fact that my svg viewBox acts differently in html compared to vuejs. Here is my code in vue: <template> <div class="venuecontainer" style="background-color:#808040;"> <svg class=&quo ...

htmlvue.js

Executing JavaScript Code Through Links Created Dynamically

I am currently developing a website with a blog-style layout that retrieves information from a database to generate each post dynamically. After all posts are created, the header of each post will trigger an overlaid div displaying the full article for tha ...

javascriptphpjqueryhtmlcss

What is the best way to utilize a single component for validating two other components?

I am encountering an issue with my components setup. I have three components in total: GalleryAddComponent, which is used to add a new element, GalleryItemComponent, used to edit an element, and FieldsComponent, the form component utilized by both GalleryA ...

javascripthtmlangulartypescriptvalidation

Creating an HTML file using PUG in a local environment (using npm and gulp)

Is there a way to automatically generate an HTML file with the same name as my Pug file whenever I save using gulp? I've checked all the documentation on but it only explains how to return Pug content in console... ...

javascripthtmlnpmgulppug

What is the most concise way to write this Xpath?

How can I retrieve the attribute value of an element using an absolute path like this: //*[@id="main"]/div[3]/div/div/div[3]/div[23]/div/div/div[1]/div/div/span/img I would like to know how to write code in relative xpath. Can you provide guidance on that ...

pythonhtmlselenium

Achieving targeted text display on specific viewports using the visible class in Bootstrap

I've recently delved into learning Bootstrap, and I'm experimenting with creating a responsive page where certain divs will only be visible on specific viewports. I used classes like visible-xs, visible-sm, visible-md, and visible-lg for the diff ...

htmlbootstrap-4

Opening a PHP file without performing thorough validation in JavaScript can lead to security vulnerabilities

I am in need of some assistance. I am currently working on a form and seem to be encountering an issue. Whenever I click on the submit button without checking the full validation, it performs the PHP action. For instance, when I input a serial number into ...

phphtml

Using the ng-app directive value with HTML and CSS can sometimes cause issues and the styles may not apply

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=mainapp&p1=Error%3A…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463) <body ng-app=""> It was working fine unt ...

cssangularjsng-app

Utilizing pop-up alerts and AJAX requests in jQuery forms

I am looking to enhance my website by creating a form using PHP and jQuery. Currently, the form is placed in the footer of my website. However, I want to display the form results in a popup within the main section of the website without requiring a page ...

javascriptphpjqueryhtmlajax

Removing a jQuery class while simultaneously adding it to different elements

I am currently working on a webpage where I have a row of 6 images. The first image, when the page loads, undergoes transformations using CSS3 due to a specific class applied to it. When the user hovers over the other images in the line, the same class is ...

jqueryhtmlcss

Utilize JavaScript to implement CSS using an "if" statement

I am currently working on implementing iOS web app properties into my website. My goal is to create a <div> at the top of the page and apply specific CSS styles when a certain condition is met in a JavaScript script. Unfortunately, I am facing issue ...

javascriptioscss

Automatically inserting a row into an HTML table

My table structure looks like this: <form name="frm_data_nasabah2" method="post" enctype="application/x-www-form-urlencoded" action="<?php echo $page_action;?>"> <table class="table table-bordered table-hover" id="tab_logic_ ...

javascripthtml

How to properly store response text in JavaScript variable?

Utilizing Ajax to execute a PHP script on my website, I aim to assign the response from the PHP script to a JS variable. The objective is for this script to set the variable "stopAt" to 42. This is where I encountered an issue: Below is the code snippet ...

javascriptphphtmlajax

After applying 'all: unset;' to remove all styles, the CSS hyphens property does not work as expected in Chrome

After applying this CSS code to remove all styles: * { all: unset; display: revert; } The issue arises in Chrome browser where CSS Hyphens are not taking effect. This can be seen with the following example: div { font-size: 3rem; -webkit-hy ...

cssgoogle-chrome

What is the best method for positioning 2 buttons at the bottom of a card using Bootstrap?

I need help with adjusting the position of two buttons in my bootstrap design. I would like both buttons to be located at the bottom of the card and have a slight gap between them, perhaps around 5 pixels. Below is the snippet of code: <div class=" ...

htmlbootstrap-5

What is the method to use Python in writing content within a <div> tag?

Edit To tackle this issue, I have discovered that the sned_keys() method of the selenium driver can provide a solution. Currently, my focus is on creating a webwhatsapp spamming script and the task at hand involves: <div class="input" contenteditable= ...

pythonhtmlseleniumselenium-webdriver

How to Make a Div Tag Fade Effect with JavaScript in an External File

*** New Team Member Notice *** I'm currently working on an assignment and trying to implement a simple fade effect on a box. While it seems like this should be straightforward, I'm encountering some obstacles. Currently, the button causes the bo ...

javascripthtmlcssfadeinfadeout