My elements are overlapping one another

I've encountered an issue with my website layout - the left-menu div goes through the footer instead of pushing it down. I've tried using clear:both; and overflow:auto, but nothing seems to work. Can anyone help me figure out what's wrong here? Here is the link to a jsfiddle for reference: http://jsfiddle.net/Qd3Rr/1/

Here's the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="nl">

... (HTML structure continued)

CSS for styling:

#inside{
margin:8%;
padding:10px;
background:white;
}
 
... (CSS styles continued)
htmlcss

Answer №1

It is recommended to add clear:both; at the end of the <div id="mainpage">. Make sure to see the example in the DEMO section below.

<div id="mainpage">    
    <div id="left-menu">
       ...
    </div>
    <div id="main-content">
       ...
    </div>
    <div class="clear"></div>
</div>

Css:

.clear {clear:both;}

DEMO

Answer №2

Insert the following code:

<div style="clear: both;"></div>

right before the closing 'mainpage' division tag.

Answer №3

Include the rule display:inline-block in the div to ensure the footer is properly positioned below.

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

Problem with Jquery hover or mouse enter show/hide functionality

I am currently experimenting with displaying hidden text when the mouse enters a div and hiding it when it leaves. Here is the progress I've made on my JSFiddle: $(document).ready(function() { $(".image").mouseover(function(){ $(".hover").show ...

javascriptjqueryhtmlcss

Issue with jQuery not being able to retrieve the data from my CSS property

this is my custom style code: table.table tr td{ padding:30px; border-left: double 1px white; border-bottom: double 1px white; cursor:cell; } and below is the jQuery script I am using: $(document).ready(function () { ...

javascriptjqueryhtmlcss

Is there a way to control the visibility of two divs depending on which one a user hovers on?

Having two stacked div elements containing images, I want the div with id = "features3_HDS_image" to become visible when a user hovers over the div with id = "HDS_Blurb", and the div with id = "features3_FH_image" to be displayed when hovering over the div ...

jqueryhtmlcss

How about implementing built-in validation for Vue Headless UI Listbox (Select) element?

I need assistance in integrating native validation support into the Vue3 or Nuxt 3 Vue Headless UI Listbox (Select) component. It appears that direct support is not available, so I am looking for the best and most straightforward approach to achieve this. ...

javascripthtmlvue.jsnuxt.jsheadless-ui

Javascript Calculator with Dual Input Fields

I have been given a task to create a calculator by tomorrow using Javascript. Unfortunately, I am currently taking a distance course and Javascript has just been introduced in this assignment. While I am familiar with HTML and CSS, Javascript is something ...

javascripthtmlcss

Apache conf file configured with CSP not functioning properly when serving PHP files

While configuring the Apache CSP lockdown for a site, I encountered an unusual behavior when opening the same file as a PHP script compared to opening it as an HTML file. The HTML file looks like this: <html> <head> <meta http-equiv= ...

javascriptphphtmlapache

Is it possible to create a d3 gauge chart showcasing data with both labels and

We've been on the hunt for a radial chart that resembles the one shown below. What makes this chart stand out is the clear display of percentage values. Despite our search efforts over three days, we have yet to come across anything using the d3.js li ...

javascriptjqueryhtmld3.jscharts

Enable the set body to have certain sections that are scrollable by setting overflow=hidden

I am currently working on a website that features the following structure: <body> <section></section> <section></section> ... </body> To prevent scroll bars on the body, I have set the CSS property body{overflow:hidden ...

cssscrolloverflow

Utilize images inputted via an HTML DOM file uploader within p5.js

I'm facing a challenge with allowing users to upload their image file through a DOM file uploader (<input type="file"></input>). Once the image is uploaded, I'm unsure of how to transfer it to JavaScript and process it using p5.js. Ho ...

javascripthtmlcssp5.js

Unable to refresh the fullcalendar section following an ajax post click

Currently developing a calendar using fullcalendar. I have created an ajax button that retrieves events from another php page. The first click on the ajax button works fine, displaying a nice month calendar with events. However, my issue arises when I cl ...

javascripthtmlcssajaxfullcalendar

Finding the identification of the first element within a nested div using JQuery

Here is the HTML snippet that I am working with: <div id="parent"> <div id="computer"> <div id="items"> <div id="1">hp</div> <div id="2">compaq</div> <div id="3"& ...

javascriptjqueryhtml

Personalize Dropdown Menu, determining when to initiate the hide menu action

When creating a dropdown using ul and li tags, I am faced with the dilemma of determining the ideal time to hide the dropdown menu. The dropdown menu is designed to display values based on user input as they type, updating dynamically. Initially, I had se ...

javascriptjqueryhtmlcssdrop-down-menu

Execute the JavaScript [ window:print() ] function once the webpage has finished loading along with any

I am facing an issue with my web page that has around 10 Google Analytics charts. I want to trigger a print dialog box once the page is fully loaded, including all the charts and JavaScript. Currently, the problem is that the print dialog box opens after t ...

javascriptjqueryhtmlprintinggoogle-analytics

Create a full bottom shadow for a circular shape using CSS 3

Hey there, I'm having an issue with creating a separation effect for a circle. I've been using the box-shadow property like this: box-shadow: 0 1px 0 rgba(0,0,0,.2);. However, as you can see in the image, the shadow on the left and right sides is ...

css

In order to maintain a custom tooltip in an open state until it is hovered over, while also controlling its

When hovering over the first column of the table, a tooltip will appear. Within each material tooltip, I would like to include a button at the bottom right after the JSON data. When this button is clicked, it should open an Angular Material dialog. <ng ...

javascripthtmlcssangular

CSS: Overlapping two divs with unique classes and varying margins - Unexpected occurrence or intentional design?

One thing I'm curious about: Will the margins of two different divs merge if they have the same value when intersecting? It appears so! Do paddings not merge when two different divs intersect, even if they have the same value? It seems that way! When ...

css

What is the best way to show an HTML response from an API call on the DOM?

After making an API call, I receive the following HTML response and I am trying to display it on the DOM as actual HTML tags, rather than just showing text with HTML tags. API response: <strong>Hello</strong> Current DOM rendering: <str ...

htmlreactjsfrontend

Why did the CSS rendering suddenly come to a halt?

I am facing a confusion with EJS. When I make a post request, EJS renders my CSS properly. However, when I try the following code snippet: exports.resetpassword = async (req, res) => { const {id, token} = req.params; const user = await LoginMo ...

cssnode.jsejs

Unveiling Fresh URLs within an iFrame

Here is the current situation: www.mywebsite.com/Pagex.html - On this page, there is an iFrame with a default URL (src) from a different domain than the host page (Pagex.html). The code inside the iFrame is a user input form with a submit button. Upon su ...

javascripthtmliframe

How can I create a dynamic height for a scrollable div?

How can I build a section with a defined height that contains a sticky header (with a dynamic height) and a scrollable body? I want the body to be scrollable, but due to the header's changing height, I'm unable to set an exact height. What should ...

javascripthtmlcss