A section element is covering a div in HTML

Currently facing some layout issues while trying to organize a page using sections. Here's the code snippet I'm working with...

https://jsfiddle.net/ytv4zp4b/

<section>
    <div class="width">
        Test Content
                <div class="sharing">
            <div class="sharingsocial">
                Social Links
            </div>
            <div class="sharingprint">
                Print Link
            </div>
        </div>
    </div>
</section>
<section>
    Footer
</section>

section{background-color:grey;}
.width{background-color:red;max-width:500px;margin:auto;}
.sharing{max-width:500px;margin:auto;}
.sharingsocial{float:left;background:green;}
.sharingprint{float:right;background:yellow;}

The problem I'm encountering is that the footer section seems to be overlapping the .sharing div. Can someone help me figure out where I'm making a mistake?

htmlcss

Answer №1

Make sure to insert the following code snippet right before closing the .sharing div.

Snippet :

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

https://jsfiddle.net/abc123xyz/3/

Answer №2

The Challenge

A problem arises when using the CSS float property, as it causes all subsequent elements to float along with it. For more information on this issue, you can refer to this link.

The Resolution

To prevent other elements from floating unintentionally, you need to include the code clear: both in your CSS.

You can achieve this by inserting the following code snippet into your stylesheet:

.width:after {
    content: '';
    display: block;
    clear: both;
}

Example

section{
  background-color: grey;
}

.width{
  background-color:red;
  max-width:500px;
  margin:auto;
  }
  
.width:after {
    content: '';
    display: block;
    clear: both;
}

.sharing{
  max-width:500px;
  margin:auto;
}

.sharingsocial{
  float:left;
  background:green;
}
.sharingprint{
  float:right;
  background:yellow;
}
<section>
    <div class="width">
        Test Content
<div class="sharing">
            <div class="sharingsocial">
                Social Links
            </div>
            <div class="sharingprint">
                Print Link
            </div>
        </div>
    </div>
</section>
<section>
    Footer
</section>

Answer №3

To make it function, simply substitute float:left with display:inline-block for the .socialsharing class. Check out the revised version on this Fiddle link

Answer №4

To create a new block formatting context for .sharing, consider using the CSS property overflow: hidden

https://jsfiddle.net/ak62r8yz/5/

Please keep in mind that using this method may result in content clipping if it exceeds the boundaries of the .sharing container.

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

Executing a JavaScript function within a PHP echo statement

I am completely new to working with AJAX and PHP echo variables or arrays. However, I have managed to successfully display images on my website by passing variables from AJAX to PHP and back. The only problem I am encountering is when I try to call a Javas ...

javascriptphpjqueryhtmlajax

Inspect the table and format the tr content in bold depending on the values found in two corresponding columns within the same table

Looking to create a responsive table where row content becomes bold if it matches the current date. Hiding the first-child th & td as they are only needed for a specific function. Comparing values in <td data-label="TodaysDate">06-05-2020</t ...

javascripthtmlcss

Disappearing text with HTML Bookmark and CSS Overflow:Hidden - What's happening?

Within the header of my webpage, there is an image div that has been styled with overflow:hidden. Inside the content section, I have a bookmark anchor tag: <a name="arghargh"></a> Located at the top of the content area, there is a link that ...

htmlcssbookmarks

Tips for launching numerous email client windows using window.open in Chrome?

Below is the html/js code I'm using: <button onclick="openWindows()">Open 3 e-mail windows</button> <script> function openWindows(){ window.open("mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" d ...

javascripthtml

Animation does not trigger before switching pages

I'm attempting to create an animation that occurs before the page transitions. After finding a jQuery script on this site and tweaking it to match my HTML, I realized the code works in a fiddle but not on my actual page. Any assistance would be greatl ...

jqueryhtmlcssweb

Filtering div elements in REACT according to user input

I need to filter the div elements retrieved from a database based on user input. It's a chat user list, and I want to display only the div of the user entered in the input field. I've experimented with various solutions found online but none seem ...

htmlreactjsinputfilter

I am having issues with my CSS file not functioning correctly on my Django template. Does anyone have any suggestions on how to resolve this issue

I've encountered issues with CSS files not working properly on my Django template. Whenever I make changes to the CSS file and reload the browser page, nothing happens. However, if I restart my computer or power off and on again, the changes reflect o ...

htmlcssdjangobootstrap-4django-staticfiles

The enigma of navigating CSS selectors: the > symbol, #id element, and

I am facing an issue with the hover color of my buttons. One of them has a different color, so the hover effect I chose for the rest doesn't quite work with that button. To resolve this, I decided to create an #id specifically for that button. Here is ...

htmlcsscss-selectorshover

Scrolling seamlessly on websites with a single page

I am developing a single-page website that uses different section IDs instead of multiple pages. It's functioning properly, but I want to implement smooth scrolling to the sections rather than just statically jumping to them on the page. Jsfiddle: ht ...

javascriptjqueryhtmlcssscroll

Creating an adaptable image with CSS or Material UI

Is it possible to create a responsive image that shifts from the top right position to the bottom as the size decreases? I've been using Material UI but haven't found any guidance on how to achieve this. .my-photo{ height: 300px; positio ...

cssmaterial-ui

Utilizing Bootstrap's Multi-Grid System

I am currently working on implementing a Bootstrap grid design that resembles pic1.jpg. However, I am facing challenges in achieving the desired layout, as pic2.jpg shows the current scenario. Below, I have shared the code I am using. pic1.jpg :- ! pic2. ...

javascripthtmlcsstwitter-bootstrap

What could be causing my divs to overlap?

I recently started coding and I'm facing an issue with my <header> and <section> divs overlapping each other. I was under the impression that being block elements, <section> should be displayed below <header>. Any suggestions o ...

htmlcss

Placing a GIF on top of an image through the use of Javascript

Welcome to my first post on this platform! I'm currently in the process of creating a portfolio website featuring long panoramic photographs displayed within scrollable divs. You can check it out here: www.edentan.co.uk/portfolio.html. My challenge ri ...

javascripthtmljquerycss

The process of transforming four columns into two columns and two rows

I am aiming to create a layout that displays 4 columns on desktop and then breaks down into 2 columns and 2 rows on smaller screens. https://i.stack.imgur.com/GZ4nQ.png https://i.stack.imgur.com/5ZCrQ.png Any suggestions on how I can achieve this layout ...

twitter-bootstrapcss

What is the best way to add pre-filled text to a text area within a form submission?

<form action='newPagePHP.php' method='post'> <p><input type='text' name='Name' placeholder='Full Name' /></p> <p><input type='text' name='PhoneNumber& ...

phphtmlmysql

CSS menu LI with horizontal spacing

I'm currently working on aligning the boxes for each <li> tag next to each other without any spaces in between. However, at the moment, there is a significant gap separating each box. How can I eliminate this space? Here is the HTML code snippe ...

csshtml-listsspacing

JavaScript's jQuery selector retrieves a child element from one location and adds it to a different

Why does the Jquery children selector select the img element, extract it, remove it, and then append it to another div element? Shouldn't it create a copy of the element being appended? var $anchors = $("#imageGallery a"); var $overlay = $('&l ...

javascriptjqueryhtmlcss

display data labels within the chart - utilizing the power of angular.js in conjunction with chart.js

My goal is to display the chart's information without requiring the user to hover over any part of the chart. I am utilizing Chart.js with Angular.js I have the same question as this one posted here: question here! html code: <div class="wrapper ...

javascripthtmlangularjschart.jsangular-chart

Leveraging Javascript to identify actual text content, rather than focusing on HTML elements

Having an issue with a WYSIWYG editor (TinyMCE) saving content into the database where values are sometimes saved that contain only tags like: <p><br data-mce-bogus="1"></p> which is not actual content. My application cannot distinguis ...

javascripthtmlangularjstinymce

The parent element is not able to apply the CSS text-decoration in jQuery

Is there a way to retrieve a specific CSS property of an element, even if it is inherited from its parent? The standard jQuery method .css() can help with this. Consider the following HTML structure: <div id="container"> some text<br> ...

jquerycsstext-decorations