having difficulty adjusting the background color of a div that is positioned absolutely

Hey there! I am new to the world of html/css and working on my very first webpage. I'm facing an issue with setting the background color for a div with the class inner. Currently, it is displaying the background color set in the banner-bottom class.

Here is the snippet of my html code:

    .banner-bottom{
      background:#F7F7F7;
      padding:1em 1em;
      text-align:center;
      position: relative;
    }
    
    .floatleft {
    float:left;
    width: 25%;
    height: 100%;
    }
    
    .floatright {
    float:right;
    width: 75%;
    background-color: #EEE;
    position: relative;
    text-align: center;
    }
    
    .inner{
    position: absolute;
    height:100%;
    text-align: center;
    background-color: #1b1b1b;
    width: 100%;
    }
<div class="banner-bottom" width="100%" >
         <div class="floatleft"><input  type="button" class="pink_btn" value="Who?"/></div>
         <div class="floatright"><div class="inner"> some values here</div></div>
         <div style="clear:both;"></div>
    </div>

Any tips on where I might be going wrong? Thank you for your help! :)

htmlcss

Answer №1

Issues arise when applying height: 100% to the inner class. Absolute positioned elements behave differently as they disrupt the box model of the DOM. To position the absolute element correctly, consider using the properties top, bottom, left, and right.

Here is the HTML code snippet:

.banner-bottom{
  background:#F7F7F7;
  padding:1em 1em;
  text-align:center;
  position: relative;
}

.floatleft {
    float:left;
    width: 25%;
    height: 100%;
}

.floatright {
    float:right;
    width: 75%;
    background-color: #EEE;
    position: relative;
    text-align: center;
}

.inner{
    color: white; /* added for visibility */
    position: absolute;
    text-align: center;
    background-color: #1b1b1b;
    right: 175px;
}
<div class="banner-bottom" width="100%" >
     <div class="floatleft"><input  type="button" class="pink_btn" value="Who?"/></div>
     <div class="floatright"><div class="inner"> some values here</div></div>
     <div style="clear:both;"></div>
</div>

The addition of color: white; to .inner enhances text visibility against the black background. Feel free to customize this according to your preference.

Answer №2

It appears that the issue lies in the defined height of .inner, as absolute positioning does not behave the same way as relative positioning. If you set a 100% height in this scenario, it will result in zero height. I recommend changing it to a PX or EM value, or simply removing it altogether. Additionally, be cautious when using absolute and fixed positioning, as there are certainly safer alternatives available.

    .banner-bottom{
      background:#ff0000;
      padding:1em 1em;
      text-align:center;
      position: relative;
    }
    
    .floatleft {
    float:left;
    width: 25%;
    height: 100%;
    }
    
    .floatright {
    float:right;
    width: 75%;
    background-color: #EEE;
    position: relative;
    text-align: center;
    }
    
    .inner{
    position: absolute;
    text-align: center;
        color: white;
    background-color: #1b1b1b;
    width: 100%;
    }
<div class="banner-bottom" width="100%" >
         <div class="floatleft"><input  type="button" class="pink_btn" value="Who?"/></div>
         <div class="floatright"><div class="inner"> some values here</div></div>
         <div style="clear:both;"></div>
    </div>

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

Showing a PDF file within a Bootstrap modal

I'm encountering difficulties with a simple task. My goal is to display a PDF using the HTML <object> tag within a Bootstrap modal. I've put together a Plunkr to illustrate the issue. Essentially, there is a straightforward <object> ...

htmltwitter-bootstrappdffirefox

Accessibility considerations for anchor tags with no content

Currently on our website, there is a component that utilizes an <a> tag with a background image set by the following CSS: a.class-name::after { content: url('image.png'); } The anchor tag itself has no visible content (appears as < ...

htmlcssaccessibilityanchor

CSS media query to center the logo on mobile screens

As someone new to CSS and media queries, I'm reaching out for help from the experts. My challenge involves positioning a mat-toolbar with a menu button and app logo. The HTML code in question is as follows: <div class="toolbar"> <mat-too ...

htmlcssresponsive-designmedia-queries

Prevent the occurrence of a fixed height problem associated with the Bootstrap Navbar (Mega Menu)

In my project, I have a Custom Mega Menu that dynamically creates code to display all Nav bar entries. Since changing the logic of Mega menu creation is difficult, I am looking for a CSS solution to avoid fixed height in bootstrap columns. My code structu ...

htmlcsstwitter-bootstrapbootstrap-4

Utilizing jQuery to determine the placement of a tooltip within a slider

I am currently utilizing both a jQuery Tooltip and a jQuery Slider (jQueryUI) simultaneously. While the slider is functioning correctly, I am encountering an issue where tooltips are being displayed in the wrong position after scrolling (view screenshot or ...

jquerycssjquery-uislidertooltip

jQuery plugin modifies keypress events

I have integrated the Jquery ImgAreaSelector plugin into my website. Within my site, I have implemented several keypress triggers using jquery. For example: $(document).bind('keypress', 'S', function(){ alert("You have pressed S key ...

javascriptjqueryhtml

What is the process for sending a request and obtaining a response from a REST API using JavaScript?

I have a private server set up on my computer with a built-in REST API. The base URL for the API is: . I am now looking to develop a client application for this server using the API. To authenticate on the server, the API endpoint is baseurl/login with the ...

javascripthtmljsonrestapi

What is the best way to eliminate borders on a span element so they collapse seamlessly?

When using the tryit editor on this html and narrowing the result window (to around 200px), the border ends up inside the span as it spans across multiple lines. Is there a way to make the border "collapse" so that it forms a single irregular border around ...

css

Struggling with how to customize the input component from react-native-elements? Let

I am currently exploring how to customize the appearance of an input using react-native-elements, similar to the design depicted in the documentation... My goal is to achieve the look of the top inputs with a white background, but I am uncertain about th ...

cssreactjsreact-nativestylingreact-native-elements

What is causing the extra whitespace on the right side with container-fluid?

Could someone assist me with an issue I'm experiencing when using the container-fluid in Bootstrap? It seems to be leaving some space on the right side of my web page, and as a newcomer to Bootstrap, any help would be greatly appreciated. <link ...

javascripthtmlcssbootstrap-4bootstrap-5

What is the best way to include attributes in an HTML element?

I've been researching how to dynamically add attributes to an HTML tag using jQuery. Consider the following initial HTML code: <input type="text" name="j_username" id="j_username" autocorrect="off" autocapitalize="off" style="background-image: lin ...

javascriptjqueryhtml

Preventing Paste Function in Electron Windows

Currently, I am utilizing Electron and attempting to prevent users from pasting into editable content. While paste and match style remains enabled, the functionality is flawless on Mac devices. However, there seems to be an issue on Windows where regular ...

javascripthtmlcssnpmelectron

Creating Consistent Button Padding in Material UI

I am working with a series of Material UI buttons that are defined as follows: <Button className={classes.button}>Edit</Button> <Button className={classes.button}>Duplicate</Button> <hr /> <Button c ...

cssreactjsmaterial-ui

Utilize JQuery's .append() method to insert a new element into the DOM and then trigger an "on click" event within

I am attempting to use the .append() method to add a new radio button, and then when I click on the new radio buttons, trigger a new function. However, I am having trouble achieving this with my current code: HTML: <label>Where should the photo be ...

javascriptjqueryhtmlappend

What is the best way to store article IDs using Javascript or HTML?

On my web page, I have a collection of links that users can interact with by clicking and leaving comments. These links are loaded through JSON, each with its unique identifier. But here's my dilemma - how can I determine which link has been clicked? ...

javascriptjqueryhtmljsonjquery-ui

Utilize Jquery's "find" function to showcase an image

I am attempting to showcase an image using jQuery. I have a function that accepts ID and PATH as parameters. The ID indicates the section (each section is an HTML page that loads upon user action). Additionally, there is a text area where I am displaying t ...

javascriptjqueryhtml

How to Retrieve HTML Content from an Azure Function Using C#

I created an Azure function using C# that generates HTML content. However, when I access it from a web browser, the response is displayed as plain text instead of rendering as HTML. After some research, it seems like I need to define the ContentType header ...

c#htmlazure-functionscontent-type

"Transforming a static navbar to a fixed position causes the page to jump

Having some difficulty figuring this out. I'm working on a bootstrap navbar that transitions from static to fixed when the user scrolls past the logo at the top. Everything seems to be working fine, except for when the navbar reaches the top, it sudde ...

javascriptjqueryhtmlcsstwitter-bootstrap

VS code showing live server as installed but failing to function properly

After installing the live server extension, I noticed that my browser is not updating when I save my HTML or other files. What could be causing this issue? ...

javascripthtmlcssvisual-studio-code

Ensure that the text fits by squishing it in the JLabel

How can I make JLabel text fit in a constrained space (JTable) by only horizontal squishing when the text is too long and gets truncated? Take a look at the upper JLabel in these examples: https://i.stack.imgur.com/Jbow6.png The text is HTML formatted, ...

javahtmlswingjlabeltext-rendering