Removing a single div box causes a ripple effect on another div box, despite their lack of connection

I'm struggling to remove the white box underneath the "features" section on this website (). The structure of the div is quite simple:

<div class="donatenew"></div>

and here's the CSS:

.donatenew {
  width:100%;
  background: #f8f8f8;
  height:1000px;
  }

However, when I try to delete the "donatenew" div, it ends up affecting the div below it, the "bottomnew" div, causing it to disappear and only leave the text behind.

The HTML for the bottomnew div:

<div class="bottomnew">

<a href="http://www.beaurosariophoto.com">Beau R.</a> | (Photo)
<a href="http://www.flickr.com/photos/jb-london">JB-London</a> | (Photo)
<a href="#"></a> | (Logo)

</div class="bottomnew">

and its corresponding CSS:

.bottomnew {
  width:100%;
  background: #d1d1d1;
  height: 300px;
  border-top: 6px solid #a9a9a9;
}

.bottomnew:a:link {color:#0088cc;
                   text-decoration: none;
                   }
           a:visited {}
           a:hover {color:#005580;}
           a:active {} 
 }

Can someone explain why deleting the "donatenew" div messes up the layout of the "bottomnew" div in the HTML? Any assistance would be greatly appreciated. Thank you!

Answer №1

Although this solution may not completely resolve the issue, it will definitely steer you in the right direction. Upon examining your source code, I noticed that there are 48 opening <div> tags and 55 closing </div> tags. This is likely the root of the problem. Utilizing a tool like this could help you identify and rectify any issues with your DIV map.

The tool indicates that there are 7 excess closing div tags as previously mentioned. By clicking on the div map link provided by the tool, you can easily pinpoint (highlighted in yellow) the surplus closing div tags. Here's an example of what to look for.

Can you spot where the problem lies? Take another look at your markup.

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

Adjusting Text Color on Buttons

I am looking for a simple button with clear color and black text, but the default button has white text. I need a way to change the text color. Check out my current app <View style={styles.fastlog}> <Button style={styles.bouton} title= "Con ...

Connecting MySQL to HTML: Step-by-step guide

I am currently working on building a website through coding in HTML using gedit. My goal is to have a login or registration feature on the homepage, which will then direct users to their own personalized page on the site. On this page, they should be abl ...

Efficiently Aligning Elements in CSS both Vertically and Horizontally

I'm struggling to align my form both vertically and horizontally. It's okay if this doesn't work on IE - I will include an IE detection script to prompt users to switch browsers. However, Firefox and Chrome support is essential. Below is m ...

What is the best way to incorporate the same partial multiple times with varying content in Nunjucks?

I'm working on several page templates that require the same partial to be included multiple times but with different content each time. I explored looping this, but the order might not always be sequential. Here's an example of how my page templ ...

sketch a portion of a picture on a canvas

My challenge involves a canvas with dimensions of 400 by 400, and an image sized at 3392 by 232. I am looking to crop the first 400 pixels of this image and display them within the canvas. How can I achieve this task? $(document).ready(function () { v ...

Adjust the style of cursor - User Interface Expansion Panel Material Design

Using the MiU component "Expansion panel", I encountered an issue. By default, when the user hovers over the panel, the cursor is set to pointer. I attempted to change it to a default cursor, but my modification did not work. The code for my component is ...

Tips for handling transparent areas during a hover event

Is there a way to make only the rhombus image respond to hover events? I want to exclude the transparent area, as shown in this picture. <img src='http://s30.postimg.org/xpd6gwla9/1_Copy.jpg' id="first"> #first:hover { -moz-box-shadow ...

Scripting in jQuery to create dropdown menus

I've encountered a unique issue on my website where a user's selection from one list should update the values in another list: <form id="form1"> <div> <select id="workField"> <option value ...

Looping through images using JQuery

I'm struggling with an image animation and can't quite figure out how to make it work. <div id="img_loop"> <img src="img/img1.jpg" alt="image1" /> <img src="img/img2.jpg" alt="image2" class="hidden" /> <img src="im ...

A div set to absolute positioning and a width of 100% will exceed the boundaries of a Bootstrap 4

I am attempting to position a div with 100 percent width within a Bootstrap 4.1 col using absolute positioning in order to attach it to the bottom. However, I am encountering an issue where it overflows on the right side of the screen. I have tried assigni ...

Using Javascript, dynamically animate the text in the hero unit with fading in and out effects

I currently have a "Hero" unit with the following code: <div class="hero-unit"> <div class="container"> <h1>Dapibus Euismod Mollis</h1> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis ...

Having difficulty reaching a div element using either its id or class in a CSS stylesheet

I'm having trouble adding padding to the home section div and I can't seem to access it using either the id or class. Any suggestions on how to solve this issue would be greatly appreciated. Below is the CSS code: body { margin: 0 ; font ...

Creating responsive data tables in HTML

My e-shop features a product description block using the code snippet below. While it looks great on larger screens, such as a 17" desktop monitor, it appears poorly on smaller smartphone screens. Friends have suggested that I learn Bootstrap/Flexbox and ...

Pause animation when hovering over their current positions

I am working on a project with two separate divs, each containing a circle and a smiley face. The innercircle1 div is currently rotating with a predefined animation. My goal is to create an effect where hovering over the innercircle1 div will pause its rot ...

The multiline feature of tooltip on mat-table cell is malfunctioning

I adjusted the mat-tooltip to be displayed as multiline using the following style in the global CSS: .mat-tooltip-class-here { white-space: pre-line !important; } Interestingly, this formatting works on span and button elements but not on mat cells. ...

Enhancing the menu/navigation bar with individual AJAX loaders

I have chosen the Vivant Designs theme for our website, which can be found at What I am looking to achieve is an ajax loader that will appear next to the link or tab when a user clicks on a link within the drilldown menu located on the left side. The cont ...

Find a python BeautifulSoup class name that can change dynamically

I'm working on extracting a variable class name using Python and BeautifulSoup. The specific class is a child of the "bar" class but it's located in a different div. <div class="foo"> <div class="bar"> <div class="===& ...

Adjust the image's height to adapt to the size of the browser

I'm having trouble resizing the images to match the height of the browser window. My goal is to limit the images' height to a maximum of 1100px and have them scale down based on the height of the browser. I've experimented with setting the ...

The search function on my blog is not displaying the blogs that have been filtered

I have encountered an issue with my code as I am unable to get any search results from the search bar. const RecentBlogs = ({recentBlogs}) => { const [query, setQuery] = useState("") const filteredItems = (() => { if(!query) return rec ...

Ways to avoid single-sided border from overlapping with border radius

When adding a 2px bottom border to a text field with a 4px corner radius on the container, the border tends to curl around the edge due to the larger radius. I am looking for a solution to keep the bottom edge flat. [What I DON'T want: border wrappin ...