Discover the solution to overlapping divs while achieving automatic height for a div

There are two divs in my code:

<header id="header">
  <div>Hello Vai</div>
</header>

<div id="banner">
 <div><img src="http://www.encodedna.com/images/theme/easy-image-resizer.jpg" /></div>
</div>

CSS:

#header {
    width: 100%;
    background: #f5f5f5;
    position: fixed; 
    z-index: 10;
}

#banner {
  background-color: #CCCCCC;
}

When the upper div is fixed, the image div will move closer to it. I want both divs to have auto height based on their inner content and appear one after another.

I haven't found a solution yet despite looking through numerous questions on this topic.

Answer №1

#header {
    width: 100%;
    background: #f5f5f5;
    z-index: 10;
}

#banner {
  background-color: #CCCCCC;
}

To achieve the desired behavior, remove the "position: fixed" from the code you shared.

Position: fixed 

If you still want to use it, place it inside a div and then use "top: inherit" to shift down the lower div in order to avoid overlapping with other elements.

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

Trouble with downloading a file from an HTML hyperlink

When I attempt to download a file from my file folder using the absolute path <a href='N:\myName\test.xlsx'>download</a>, the file opens directly instead of downloading. However, if I use the relative path <a href=&apos ...

Having trouble getting CSS3 radial-gradient to work on Firefox?

Having trouble getting this radial gradient to display correctly in Firefox: background-image: -moz-radial-gradient(bottom center, 900px 900px, #7dd134 0%, #137f1e 90%, #137f1e 100%); ...

The error message indicates that the element countdown is missing or does not exist

I typically refrain from discussing topics that I'm not well-versed in (my weak spot has always been working with time and dates in javascript), but I find myself in urgent need of assistance. I've decided to use this link to showcase a countdow ...

Identify the element in which the JS function was executed (excluding the use of IDs)

Take a look at this line: <div onload='loadContent();'></div> Here's the JavaScript function I have: function loadContent() { $.ajax({ url: '/ContentController.php', success: function(data) { //update t ...

Refresh the iframe content by clicking a button in Angular2, without having to reload

Is there a way for the search data to be reloaded when the popup is closed without having to refresh the entire page using window.location.reload()? My app will be embedded as an iframe in the main web app, so I want only the data to be reloaded upon butto ...

Setting a defined width and using block display will not solve the issue of the margin:auto not working

rough sketch of my desired design I am trying to center a label on the page. The parent container is set to a width of 100% and the label itself is displayed as a block element with margin set to auto. When I set the width of the label to a smaller value, ...

centered calculation with an offset

Check out what I'm attempting here I am trying to keep an element in the center and have another element hug the left side of it. Essentially, I want the leftmost position of the left div to be right: calc(50% - 200px - (left's width)); The is ...

Ways to incorporate horizontal scrolling into an HTML table

I am looking to incorporate a horizontal scroll feature into my HTML table. The table has a width of 100% and the first cell has a fixed width of 50px. There can be hundreds of columns in this table, so I want the first column with the fixed width to alw ...

Exploring the Best Practices for Utilizing the GET and POST Methods

Currently, I am in the process of constructing a locally hosted website using flask that will enable me to scrape various websites like craigslist. However, I have encountered some challenges with updating the main index page correctly. As someone who is s ...

The issue with the jQuery class change not being triggered in Internet Explorer seems to be isolated, as Chrome and

This little jQuery script I have is supposed to show a fixed navigation menu once the page has been scrolled below 200px, and then change the class on each menu list item to "current" when that section reaches the top of the viewport. The issue is that th ...

Incorporate some flair into the Twitter iframe with a Style tag

I have been attempting to add a style tag into the head of an embedded Twitter timeline in order to customize some of the styling. I wrote the CSS and added it within a style tag. My initial idea was to inject this into the iframe using jQuery, but unfortu ...

Switch up the display of table rows with a convenient Toggle Button located right after the

Looking for a way to toggle the visibility of certain rows in an HTML table using a button but having trouble placing the button after the table instead of before. Any suggestions on how to customize this setup? Thanks! /*Use CSS to hide the rows of t ...

Developing a slideshow with PHP and JQuery

Attempting to create a simple manual slideshow where the user clicks "next" to advance to the next slide. I have over 50 images and want to display them in batches of 8. For example, the first batch of 8 will be shown initially, then the user can click "ne ...

The subscription data for nested classes appears to be displaying as undefined

In my current project, I am utilizing Angular 8 and facing an issue with a nested class. The problem arises when trying to access data from an observable subscribe operation in the child class (Players) within the main Tournament class. Until the data is r ...

What are the conditionals and operations that need to be underscored in this template?

I am new to working with underscore and I need help writing an "each" function for posts where only the latest post is displayed. I understand the basic logic which looks like this <% _.each(posts, function(post, index) { %> <% if(index % 3 == 0 ...

What is causing the border-radius property to malfunction on a particular website when using Internet Explorer?

We create browser add-ons for popular browsers like Google Chrome, Firefox, Safari, and Internet Explorer. Our add-ons inject HTML elements into various websites such as mail.google.com and email14.secureserver.net. The HTML element we use has a border-ra ...

What is the process for defining an image background with the <img> tag instead of CSS?

I am faced with a challenge of creating 4 columns, each containing an image where text needs to be displayed over the image. While I know this can be done using CSS, I am looking for a way to set the image as a background directly within the HTML file. T ...

Exploring the power of AngularJS through nested directives

Index.html: <nav-wrapper title="Email Test"> <nav-elem value="first"></nav-elem> <nav-elem value="second"></nav-elem> </nav-wrapper> app.js: app.directive('navWrapper', function() { return { ...

Insert data into the corresponding input box by selecting a checkbox with the same class individually

How can I place the value of checked checkboxes into different input boxes with the same class? Currently, the value of all input boxes with the same class reflects the value of the checked checkboxes. I am looking for a way to assign the value in input bo ...

What is the best way to personalize the icon for this navigation button?

I'm interested in making some changes, especially to the border. I've already figured out how to adjust the color of the 3 bars like so: .navbar-default .navbar-toggle .icon-bar { background-color: #fff; } Modification RESOLUTION .navbar- ...