The clearfix method seems to be ineffective when dealing with elements positioned absolutely

I have a div with position absolute and float left and right. I am trying to add an image below this div.

The issue I am facing is that the image is overlapping with the first div. I want the image to be displayed below the first div without any overlap.

Check out this link for reference.

<div class="top">
    <div class="left" align="center">
        <p><a href="#">Sell</a></p>
        <p><a href="#">Download App</a></p>
        <p><a href="#">24x7 Customer Care</a></p>
    </div>
    <div class="right" align="center">
        <p><a href="#">Track Order</a></p>
        <p><a href="#">Help</a></p>
        <p><a href="#">About</a></p>
        <p><a href="#">Contact</a></p>
    </div>
</div>

<div class="clearfix"></div>

<div class="logo_menu">
    <p><img src="assets/images/logo.png" alt="" title="" /></p>
</div>

.clearfix {
    clear:both;
}
/* Top */
.top {
    width:100%;
    height:auto;
    background:#E9E9E9;
    position:absolute;
    padding:10px;
}
.top .left {
    float:left;
}
.top .left p {
    display:inline-block;
    margin:0 10px 0 10px;
    font-size:12px;
}
.top .left p a {
    text-decoration:none;
    color:#B5B5B5;
}
.top .left p a:hover {
    text-decoration:underline;
    color:#FD6123;
}
.top .right {
    float:right;
}
.top .right p {
    display:inline-block;
    margin:0 10px 0 10px;
    font-size:12px;
}
.top .right p a {
    text-decoration:none;
    color:#B5B5B5;
}
.top .right p a:hover {
    text-decoration:underline;
    color:#FD6123;
}

/* Menu and Logo */
.logo_menu {
    width:100%;
    height:auto;
}

Answer №1

Is it necessary to use absolute positioning for the logo?

An element with absolute positioning is placed on its own layer on the homepage, making it difficult to clear floats.

My usual clearfix method looks like this:

.clearfix:after {
  clear:both;
  display:block;
  content: "";
}

Here is a fiddle demonstrating the technique: https://jsfiddle.net/jv7afgn1/4/

Answer №2

Increase the top padding to match the height of your fixed navigation bar View Demo

.logo_menu {
    width:100%;
    height:auto;
    padding-top:30px;
}

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

Drawing the canvas is taking place prior to the image being fully loaded in JavaScript

Currently, I am in the process of creating a collage using images that are all sized at 174x174 pixels. The images are stored on my server, and while my program can locate them successfully, it requires me to click the "save image" button twice for them to ...

space allocated beneath a table cell

I am currently utilizing the foundation framework for emails and have encountered a formatting issue on my Test Page. There seems to be an unwanted whitespace just below the racoon image that I am struggling to remove. Despite setting the height to 250px, ...

Requesting an image from the live website using a GET method

Recently, I registered a domain for my personal website. While the site is still a work in progress, I noticed that the logo image fails to display when viewed through the browser on the site. Surprisingly, it shows up perfectly fine when accessed via loca ...

WP How can I modify a particular thumbnail size with a custom CSS class?

I have been attempting to use add_image_size for my custom thumbnail resize, but it seems to be having trouble maintaining the thumbnail size at 220 x 220. Instead, it keeps changing the height to 167 pixels. As a workaround, I am exploring a CSS-based sol ...

Eliminating unnecessary whitespace between the bottom of the document and an element

I have a HTML page that when scrolled should limit scroll to the document height. It must not exceed the bottom of an element. Here is a screenshot for better understanding: https://i.stack.imgur.com/RaVg8.jpg The scrolling should be limited after the En ...

Switch the checked status of an input dynamically using jQuery function

It seems like I might be overlooking something quite obvious, but I can't figure out why this jquery function is behaving inconsistently. HTML: <label id="income_this_tax_year"> <div class="left"> <p>Have you had Self-Employm ...

Enabling scrolling for a designated section of the website

Example Link to Plunker <clr-main-container> <div class="content-container"> <div class="content-area"> <div class="row"> <div class="col-xs-9" style="height:100%; border-right: 1px solid rgb(204, 204, 204); padding-ri ...

Error in Typescript: Function not being triggered on button click

As someone who is just starting out with typescript, I've been tackling a simple code that should display an alert message in the browser when a button is clicked. I've experimented with the button and input tags, as well as using both onclick ev ...

Embedding an Iframe in the Main URL

I have a specific request where I've inserted an anchor tag within an IFRAME. Currently, when the anchor link is clicked, the page redirects within the IFRAME. However, I need the functionality to redirect to the main URL instead of staying within the ...

What could be causing the dismiss button to not function properly on the bootstrap alert in my Flask application?

I have included jquery, the boostrap css link in the head, and the bootstrap javascript before the closing body tag. Additionally, I am utilizing Flask. {% for message in get_flashed_messages() %} <div class="alert alert-success alert-dismi ...

Using jQuery and CSS to Filter and Sort Content

I need help with filtering a list of content based on their class names. The goal is to show specific items when a user clicks on one of two menus. Some items have multiple classes and users should be able to filter by both menus simultaneously. Currently ...

Tips for aligning an image to the left inside a paragraph

Currently working on my ecommerce store homepage, placed just below the carousel is an image with the heading "I Wish I Were Knitting..." accompanied by a paragraph that seems to be wrapped around it. I have added a float class to the image tag within the ...

Is it possible to dynamically set the maximumSelectionLength in a select2 dropdown?

In my HTML, I have two select elements. One is for multiple selection of items in a dropdown and the other is for adding tags. If the number of selected items is 3, then users should only be allowed to add 3 tags - no more and no less. $(".js-example-b ...

Having trouble with Safari on your iPhone? Seeing image outlines peeking through radius borders?

Has anyone encountered a similar issue before? I'm experiencing this problem specifically on Safari for iPhone. Problem: https://i.sstatic.net/ffqWz.jpg Solution: https://i.sstatic.net/z1bUB.png Below is the HTML code snippet: <div class="row"& ...

What is the best way to incorporate a linear gradient into the background image using bootstrap?

I'm working on a react app and I'd like to apply a linear gradient of 0.7 to the background image using bootstrap. Can anyone help me with this? <Carousel.Item> <img className='banner-bg d-block w-100 bg-dark bg-gradient &apo ...

How to create a scrolling fixed div that moves horizontally and repositions to the center when the page is maximized

I've been searching for a solution to my problem and have managed to figure out the first part, but there's still one issue that I could use some help with. While I have some knowledge of html, css, and basic php, I'm completely new to javas ...

Switching Background Colors with CSS

Can you change background colors using only CSS3? I attempted to use keyframe animations, but they only transition the background color. I simply want the background color to change after 5 seconds with no transition or hover effects. If I can fade it in ...

Tips on determining the type of DOM element for CSS Selector adjustment

In this case, $self is not returning the expected result and I am getting "undefined". To adjust the CSS selector to correctly target the desired element, I need to determine which element type I am dealing with. Is it the "ul", "li", or "a" element? Whil ...

The carousel functionality in Firefox and Opera is currently experiencing issues and is not functioning properly

I have implemented a horizontal carousel at the bottom of my website www.woody.my. The carousel functions properly in Chrome, but is not visible in Firefox, Opera, and IE. Here is how it appears in Chrome: And this is how it looks in Firefox: ...

Is it possible to use HTML code as content in CSS?

How do I go about displaying the variable $text as HTML? Take a look at the code snippet provided below: <?php header('Content-type: text/css'); $background = "#ffafff"; $color = "#000000"; $green = "#16a86f"; $text= '<h1&g ...