The clearing function does not seem to be functioning properly on my div

Can someone help me figure out why clear:left is not working to clear the orange div under the yellow one in my code snippet?

Check out the code here

#parent {
    height:300px;
    width:100px;
    float:left;
    border: 1px solid;
}

#unknown {
    float:right;
    height:50px;
    width:20px;
    clear:left; /* I expected this to make the child (orange) div float underneath, but it's not happening */
    background-color: yellow
}

#child {
    float:right;
    height:100px;
    width:50px;
    background-color: orange;
    /*text-align: center;*/
}

Answer №1

It seems that you might want to consider clearing the #child element and using a right value instead:

#child {
    float:right;
    clear: right;
    height:100px;
    width:50px;
    background-color: orange;
    /*text-align: center;*/
}

http://jsfiddle.net/w5K4j/15/

Answer №2

Check out the revised fiddle

Instead of constantly clearing floats inside the element, it's better to create a reusable class.

Simply use

<div class="clearfix"></div>
to clear floats wherever necessary

Here are the modifications made to your fiddle

HTML

<div id="parent">
<div id="unknown"></div>
<div class="clearfix"></div>
<div id="child">
    <h3>Click this overflowing text that I'd like to V/H center when rotated</h3>
</div>
</div>

CSS

#unknown {
float:right;
height:50px;
width:20px;
//removed clearance
background-color: yellow
}

.clearfix{clear:both;} //added new class

I hope this solution is beneficial for you!

Answer №3

Does this meet your requirements?

http://example.com/unique-link

#specialDiv {
float:left;
height:100px;
width:30px;
clear:right;
background-color: blue;
}

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

The jQuery .html() method cannot be used to replace a JavaScript chart

Utilizing jQuery's ajax calls to generate a Dojo toolkit chart based on the user's selection from a drop-down menu is proving tricky. The issue arises when attempting to replace the existing chart - instead of swapping it out, the new chart appea ...

Troubleshooting head.js and jQuery problems in Chrome/Firefox 5

After rendering the page, it looks something like this: <!DOCTYPE html> <html> <head> <script> head.js("js/jquery.js", "js/jquery.autocomplete.js"); </script> </head> <body> ... content ...

Slow rendering occurs with unthrottled range input, even with proper throttling applied

I'm currently seeking some general guidelines because I'm unsure where to turn for help at the moment. The issue I am facing involves an uncontrolled input[type=range] slider that performs very slowly when there are numerous steps (works fine wi ...

The issue with the Z-index being ineffective is causing the button to appear behind a container in the HTML-CSS

I am currently using Metro CSS (Windows 8 style) and running into an issue. Within my container, there are alerts displayed in blue, and above that is 'IT-CENTER'. When I click on 'IT-CENTER', a button should appear, but it seems to be ...

Issue with retrieving the current location while the map is being dragged

How can I retrieve the current latitude and longitude coordinates when the map is dragged? I've tried using the following code: google.maps.event.addListener(map, 'drag', function(event) { addMarker(event.latLng.lat(), event.la ...

Adjust the width of a full-page layout within a compact div container

I am working on styling two div elements with different widths: one at 15% and the other at 85%. My goal is to create a pop-up form within the second div that covers the entire page when clicked, but so far it only covers the 85% width. Is there a way to m ...

Using the `let` keyword in Node.js for variable declaration

Understanding global and local identifiers in Node.js has been a bit tricky for me, especially when working with database query results in the page.evaluate() method. I'm seeking assistance in utilizing variables from a query to subsequently use them ...

The text box in HTML5 is too wide due to excessive padding

I need to update my input field to be padded from the inside as I transition to HTML5. It was working fine in HTML 4.01 Transitional, but now it overflows outside of the table frame in HTML5. Can someone help me fix this for HTML? Snippet of HTML Code &l ...

Display the json encoded result of a MySQL SUM() query

I am attempting to use JSON to print the total sum of a price. Here is my current approach: $query="SELECT SUM(cost) FROM `Service`"; $result = mysql_query($query); $json = array(); while($row = mysql_fetch_array($result)) { $json[&a ...

Having trouble with Vue i18n and TypeScript: "The '$t' property is not recognized on the 'VueConstructor' type." Any suggestions on how to resolve this issue?

Within my project, some common functions are stored in separate .ts files. Is there a way to incorporate i18n in these cases? // for i18n import Vue from 'vue' declare module 'vue/types/vue' { interface VueConstructor { $t: an ...

Leveraging information obtained from a single asynchronous API request for another

I am facing a challenge with handling asynchronous data calls in AngularJS. The scenario is that I will receive multiple objects in an array from one API call, and then I need to enhance those objects with additional data from another API call. My initia ...

Why is it not possible to pass references when utilizing a self-invoking function?

I have been experimenting with the IIFE pattern for some of my modules lately and encountered a problem that has stumped me. In my current project, I need to pass a few global variables for usage. One of these is the global googletag variable which initial ...

What is causing the issue with my navbar 'bars' not showing up properly on mobile devices?

My navbar is not displaying the ul bars when I click on the button to open them in mobile view. Here's what currently happens: https://i.sstatic.net/fFIzM.png What I actually want it to look like is this: https://i.sstatic.net/a8fSK.jpg However, w ...

Guide for linking together multiple Axios calls to ensure they execute in sequence and enable each call to access the data obtained from the preceding call

Hey everyone, I have a unique challenge that requires your help. So, I'm working with an array of items and I need to make an Axios post for each item in the array. The catch is that each item relies on data returned from the previous one, so they mus ...

Ways to invoke a JavaScript function within a child window that is already open

I am working on a project where I have a main html file. In this file, I want the user to click on something that will trigger a new window or tab to open. This new window/tab should display the dynamically generated content of a hidden div in the main htm ...

Tips for displaying a div only when the input value is greater than 0, and hiding it when the value is 0

My goal is to display a div whenever the input contains at least 1 character and hide it when the input is empty. Despite my efforts, I can't seem to make it work no matter what I try. Here is my initial attempt: var input = document.getElementById( ...

Is there a way to halt this interval once it reaches the end of the array?

I am attempting to create a simple animation using an array where it types out my name in a similar fashion to a command prompt. This is my first experience with React hooks, so I am feeling a bit lost. My goal is to have the interval stop at "Felipe Garci ...

How to incorporate Vue3 into Django using CDN without the need for a NodeJs bundler?

When working with Vue2, all I had to do was add the CDN and then Vue would be available in my JavaScript files. However, when trying to use Vue3, my JavaScript files are not detecting Vue. How can I troubleshoot this issue and start using Vue3 successful ...

Tips for retrieving the values configured within an Angular JS template directive like "ng-class."

Background: I am in search of a pure Angular JS solution to address this issue, utilizing the framework’s functionality rather than creating workarounds that involve searching for ng-class values within the DOM. The template structure is as follows: &l ...

Html5 declares that the statuses of values are not defined

In a chrome extension, I am encountering an issue with the following code: var DB = openDatabase('CMPDB', '1.0', 'Database for CMP', 4 * 1024 * 1024); LoadFromDB(); function LoadFromDB() { DB.transaction( function(t ...