There are no elements nested within the Div tag

I've encountered an issue with one of my divs where the nested nav tags are not displaying correctly when inspected in Firefox or Chrome. The div appears isolated from its contents.

<div class="nav">
  <nav class="social">
    <ul>
      <li><a href="#"><img class="icon" src="assets/facebook.png" alt=""></a></li>
      <li><a href="#"><img class="2 icon" src="assets/google.png" alt=""></a></li>
      <li><a href="#"><img class="icon" src="assets/linkedin.png" alt=""></a></li>
      <li><a href="#"><img class="icon" src="assets/twitter.png" alt=""></a></li>
      <li><a href="#"><img class="icon" src="assets/wordpress.png" alt=""></a></li>
    </ul>
  </nav>
  <!-- @include _nav -->
</div>

The issue could be related to the CSS styling, so here is the relevant CSS code. It's possible that this issue relates to Hammer for Mac, but it seems to function properly in other contexts.

.head {
padding-top: 25px;
overflow: hidden;
padding-bottom: 10px;
// background-color: yellow;
}

h1 {
margin: auto;
text-align: center;
color:white;
font-family: sans-serif;
font-size: 35px;
text-shadow: ...
...

.social li {
display: inline;
}

Thank you for any assistance offered.

htmlcssmacosgoogle-chromesublimetext2

Answer №1

Within the "nav" div, you have both the social and headnav nav elements floated to the right and left respectively. This causes them to be removed from the normal document flow, as explained on the Mozilla Developer Network. When inspecting this div in developer tools, it may seem like it's not containing these elements.

However, remember that these elements are still considered children of the div in the Document Object Model (DOM).

In cases where an element only contains floated children, its height would typically be 1px. In your situation, due to padding applied, it is 10px. This behavior can complicate aspects of layout definition, such as margin below the parent or styling choices like background patterns, colors, or borders.

This behavior is entirely normal and doesn't indicate a mistake on your part.

There are various methods for clearing floats so that the parent element encompasses the floated children:

  1. Add another element after the floated elements with style="clear: both";

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

  2. Apply the style overflow: hidden to the parent container.

  3. Utilize one of the clearfix techniques outlined on CSS tricks

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

When using the SASS @debug directive, it has the ability to display two distinct values for a single variable

Encountering an issue while compiling a scss file to css, the error message reads as follows: Error: src/scss/_custom.scss Error: Incompatible units: 'rem' and 'px'. To address this, I inserted @debug directives above the problematic ...

csssass

Three images intersecting one another

I am facing an issue with the transparency of one specific image. The images on the left and center look fine, but the one on the right is not hidden behind the center image. I have tried using overflow: hidden and z-index, but haven't had any success ...

htmlimagecss

Sticky box fails to maintain position as header scrolls

I am looking to create a Sidebar that sticks to the window while scrolling, but stops when it reaches the footer. I have managed to get it partially working, but there is a small issue that I can't seem to solve. Test it live here: Everything seems ...

javascriptjquerycsshtmlposition

A specialized WordPress template that loads just the header and footer

I have encountered a strange issue while trying to create a custom template for WordPress. The index.php file is working perfectly fine - all elements load without any issues. Here is the code in index.php: <?php get_header(); ?> <?php if ( is_ ...

phpcsswordpressheaderfooter

Dynamically update the source/content of a div with lengthy blocks containing scripts

Although I have come across numerous questions and answers related to similar issues, I have not been able to find a solution for my specific case. In one of the <div> elements on my webpage, I am dynamically displaying data in a graph using javascr ...

javascriptjqueryhtmldygraphs

Trouble with CSS in a WordPress theme utilizing a two-column layout

After setting up my wordpress blog (http://raptor.hk), I encountered an issue with aligning the right sidebar correctly. It seems like I have overlooked something in the CSS code. The div responsible for the sidebar has been assigned the name "rightbar". I ...

csswordpress-theming

How to eliminate the top spacing in a Bootstrap 4 navbar

I'm facing an issue with the bootstrap 4 navbar - I am trying to get rid of the white space that appears above the nav bar but so far, my attempts have been unsuccessful. Here's how it looks when rendered: https://i.sstatic.net/zfyWJ.jpg It see ...

htmlcsstwitter-bootstrapbootstrap-4

What's causing the navigation anchor tags to malfunction?

My website consists of two pages. The home page features a one-page navigation system where clicking on 'about' scrolls down to the corresponding section within the same page. PART 1 - On index.html However, when clicking on the 'blog&apo ...

javascripthtmlcssnavigationonepage-scroll

Accessing JSON data dynamically in a Vue v-for loop is made possible by utilizing variables

I am working with the following block of HTML: <div class="home-cards flex-cards" > <div class="card border-info" style="width: 18rem;" v-for="name in equipment.data"> <div class="card-body"> ...

javascripthtmlvue.jsvuejs2

Expanding Column Width Dynamically with Bootstrap When Text is Added

My HTML Code presents a challenge that I need help with: <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.mi ...

htmlcssbootstrap-5

How can I incorporate a custom icon into the <i> tag in HTML like Bootstrap does with its icons?

When working with Bootstrap, you can easily add an icon using the following syntax: <i class="bi bi-arrow-right-square-fill fs-1"></i> One great feature is that you can adjust the size of the icon by simply adding the fs-1 class. If ...

htmltwitter-bootstrapbootstrap-5

Using HTML5 with Thymeleaf: default placeholder value displayed in an input field of type number is 0

As I work on my Spring Boot application, I'm developing a simple HTML form with Thymeleaf integration. One specific line in the form reads as follows: <input type="number" step="0.1" min="0" max="10" **th:field="*{rating}"** ...

htmlspring-bootspring-mvcbootstrap-4thymeleaf

Angular2 material dropdown menu

Currently, I am studying angular2 with its material design. One of the modules I am using is md-select for material and here is a snippet of my code: <md-select> <md-option value="1">1</md-option> <md-option value="2">2< ...

cssangularangular-material

CSS animations are not running as expected

Currently, I've been experimenting with a basic CSS animation. The objective is to make the application logo move 200px to the right and then smoothly return to its original position. Below is the code snippet I've used for these animations: /* ...

htmlcssreactjsanimationcss-animations

The icons in webviews on mobile apps (iOS and Android) fail to render correctly

My font icons are behaving inconsistently on webkit-based mobile browsers when used on mobile devices. When hovering over the span on a desktop browser, the icon properly fills its container: https://i.sstatic.net/qzrmz.png However, when hovering over t ...

htmlcsswebviewuiwebviewandroid-webview

JavaScript: Developing an interactive Word Guessing Game

Here's some sample code: let ccdisplay = document.querySelector('.crrDisplay'); let incdisplay = document.querySelector('.incDisplay'); let guess = document.querySelector('#character'); let textForm = document.q ...

javascripthtmlloops

Scroll horizontally through the number field in Chrome

I have configured a number input field with the text aligned to the right. Scenario: While testing, I discovered that selecting the entire text or using the middle mouse button to scroll within the input field allows for a slight leftward scrolling of ab ...

javascriptjqueryhtmlcss

Is there a competitive edge in defining Css Selector with symbols versus without symbols in Selenium Test Automation?

When it comes to Test Automation, CSS is used to define page elements. There are two ways to define a sample page element: element :fld_page_element, "#uniqueID .some-class-name" OR, element :fld_page_element, "[id='uniqueID'] [class='som ...

javacssrubyselenium-webdriversite-prism

Having trouble locating specific elements on Yahoo News with Selenium in Python?

I am currently facing some challenges with extracting comments from Yahoo News using Selenium. I have successfully clicked on the comments button to open it, but now I am struggling to locate the text of the comments section. from selenium import webdriver ...

pythonhtmlselenium-webdriverweb-crawler

In an HTML document, you may encounter whitespace that is not present in JSFiddle

Upon running this HTML file in my browser, I noticed that there is an 18px gap at the top of the first div. It's strange because this issue only occurs when I run the HTML locally on my browser, but everything works fine on JSFiddle. I'm puzzled ...

jqueryhtmlcss