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

How can I make the hover effect only apply to the text and not the entire box?

I'm wondering how I can make the :hover property only affect individual letters in my navigation bar, instead of hovering over the entire box. * { margin: 0px; padding: 0px; } .navigation-bar { height: 3.2em; background: gray; text-align: ...

htmlcsshover

I am experiencing an issue where the close button image on tap is not closing on the first tap on

Why does the page close on the second tap instead of the first tap when using an iPhone? The image changes on tap but doesn't close as expected. $("#privacy-close-btn").mouseenter(function() { $("#privacy-close-btn").css("display", "none"); $(" ...

jqueryhtmlcssiphone

Styling with CSS to create a layout similar to Facebook Messages

I am attempting to design a web layout similar to Facebook's Messages page, with a fixed height header and footer, and a flexible height main element. Within the main element, there needs to be: A div (100% height of the main elem.) that is scrolla ...

htmlcssflexboxscrollable

Using a combination of jQuery and JavaScript to switch image tags between different classes

I'm really struggling with this issue and could use some guidance. Essentially, I have a code that should change the class of an img tag when a user clicks on a div element. Let's take a look at the HTML structure: <li><img src ...

javascriptjqueryhtmlclasstoggleclass

The functionality of session_start() is operating smoothly in Firefox, however, it is experiencing compatibility issues

session_start() seems to be functioning properly in Firefox, but is not working in Chrome. I have placed session_start() at the beginning of a file, yet it still fails in Google Chrome. I have implemented a condition in my code where if the session is se ...

phphtmlgoogle-chromefirefox

Differences between visibility property manipulation in HTML and JS

One issue I am facing is that when I add a hidden property to a button in the HTML, it remains invisible. <button id="proceed_to_next_question" hidden> Next Question </button> However, if I remove the hidden property and include the following ...

javascripthtmlvisibility

How can the background of a div be altered when text is typed into an input field?

I need help with the following code. I want to be able to change the background color of a div with the class "target_bg" from red (default) to green every time someone enters or types text into the input field. <div class="target_bg"></div> & ...

javascripthtmlcss

The hover CSS effect in the dropdown menu does not apply to sibling elements, but does work on descendant elements

Below are two sets of code for creating a dropdown menu. Although similar, the codes have a slight difference. In both cases, I have assigned classes to the main list item and submenu. The main heading has been given the 'heading' class with an a ...

htmlcssdrop-down-menu

What is the best way to add padding to both the TextField input and label components within Material UI?

Recently, I've integrated Material UI into my project and set up a TextField for a form field. However, I'm facing an issue where applying padding to the input field doesn't affect the label as well. <TextField sx={{ display: &q ...

cssreactjsnext.jsmaterial-uimaterial-design

Monochrome tabletop solid in one hue

I'm trying to eliminate the space between the columns in my table so it looks solid. Here's the CSS style I've been using: <style> tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:90%;background:transparent;} table{ margin: ...

htmlcss

`Scrolling through a horizontal menu with no scrollbar present`

Is there a way to create a horizontal menu that can scroll left or right without the scrollbar? I'm looking for a solution like adding on-screen arrow buttons or implementing mouseover functionality. What would be the best approach? div.scrollmenu ...

javascriptjqueryhtmlcssscroll

Automate your functions using Javascript!

Hello, I have written a code snippet that triggers an action on mouse click. Initially, I created a function that scrolls the screen to a specific element upon clicking another element: (function($) { $.fn.goTo = function() { $('html, bo ...

javascriptjqueryhtmltwitter-bootstrapfunction

Header and footer that remain in place while the content scrolls smoothly

I'm currently working on designing a webpage that includes three separate divs: a header, a footer, and a content area. These divs are intended to fill up the entire screen space available. The header and footer remain consistent in size and structur ...

htmlcss

Avoid having a pre tag enclosed long line exceed its container's width

Within the <pre> </pre> tags, I have a lengthy single line of text that needs formatting. Is there a method to automatically wrap the text or must I manually insert <br> tags within the text? ...

htmlcss

Designing a unique customized top navigation bar in Magento 1.9.2

I recently attempted to create a unique top menu in magento 1.9.2 by modifying the Navigation.php file located at app/code/core/Mage/catalog/Block/. I added some custom classes in an effort to customize the menu. In order to achieve this customization, I ...

phpcsstwitter-bootstrapmagento

Show JSON information from a jQuery post request

Greetings, I am currently working on implementing a login script using Ajax. My objective is to retrieve and display data such as email and username, and then store it in local storage. Although I can successfully obtain the data in JSON format, I want to ...

javascriptphpajaxjsonhtml

Having trouble retrieving the default selected value using the index in Angular Material's mat-button-toggle functionality

I'm encountering an issue with setting the default value for a toggle button group. The code is simple and the toggle buttons are correctly fetching values from the index, but I can't seem to get one of them to be default selected. I tried settin ...

javascripthtmlangularangular-material

Angular Material's <mat-select> tag allows for the inclusion of an <input> element within it

I am attempting to place an input element inside the mat-select tag of the Angular Material element. However, I am facing an issue where I cannot input any text into the input field inside the select element. Below is the code I am using to search for elem ...

htmlangulartypescriptbootstrap-4angular-material

Challenges with moving images in Unslider

There seems to be an issue with the unslider-arrows on the unslider banner. The images are not sliding properly when transitioning to the next image without user input. Instead, they resize from small to full size starting at the top of the .banner div. ...

javascriptjqueryhtmlcss

Eliminate any excess space to the right of the image

Utilizing Bootstrap alongside React, I've encountered an issue with images causing unwanted whitespace to the right. I've thoroughly examined the elements but have been unable to resolve this issue. Despite researching Bootstrap Col online, the ...

htmlcssbootstrap-4react-bootstrap