Troublesome situation arising from CSS floats overlapping div elements

It's strange how this issue always occurs when using floats.

This is what my div (samle) looks like:

 <div class="main>
   <div class="inn_div">&nbsp</div>
 </div>

Here is my stylesheet:

  .main{ width:250px; border:1px solid #000; }

  .main .inn_div{ float:left; width:25px; height:50px; border:1px solid #000; }

As you can see in the image below, the inn_div overflows from .main. It works fine when using "inline-block or table-cell", but I don't want to use those. What could be the problem with float or is it something I am doing wrong?

htmlcsscss-float

Answer №2

To fix this issue, it is necessary to clear the float.

See a demonstration here

<div class="container">
   <div class="inner_div">
       &nbsp;
   </div>
    <div style="clear:both;"></div>
 </div>

Answer №3

When using a main div as a wrapper, be mindful of avoiding overlap by refraining from placing inner divs within it. If necessary, adjust the margin-top or padding-top properties to achieve desired spacing and layout.

Answer №4

To ensure proper spacing between elements, implement the CSS clear property. For example, use clear:both.

Answer №5

To solve this issue, simply add a height or minimum-height to the main class. Currently, only the width is specified, so there is no need for additional scripts such as JavaScript.

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

Tips for maintaining the particles.js interaction while ensuring it stays under other elements

I have incorporated particle.js as a background element. By adjusting the z-index, I successfully positioned it in the background. While exploring solutions on the Github issues page, I came across a suggestion involving the z-index and this code snippet: ...

javascripthtmlcssparticle.js

I experienced issues with the brackets software freezing up while using the Bootstrap min CSS file

Recently, I've been using brackets as my text editor and have run into an issue with the bootstrap.min CSS file. For some reason, it keeps freezing whenever I try to load it in brackets. Oddly enough, HTML files work perfectly fine, but ...

cssadobe-brackets

Using jQuery to animate the grayscale filter with a value of 0

Currently, I am implementing the Waypoints jQuery plugin to add animation to a series of images as a user scrolls over them. My goal is to apply certain CSS properties - opacity:1, filter:grayscale(0), -webkit-filter:grayscale(0), and -moz-filter:grayscale ...

jquerycssjquery-waypoints

Resize the div based on the width and height of the window

My goal is to create a system or website that can be fully resizable using CSS and the VW (viewport width) unit. Within this system, I have integrated a GoogleChart that functions with pixels. Now, I am looking for a way to scale the chart using Javascript ...

javascriptjquerycssgoogle-visualization

midway through processing HTML form

In the past, I have come across web forms that span multiple pages. If invalid information is entered on any page, it triggers an error message and requires the user to rectify their input. Despite this, I am having trouble locating resources to guide me ...

html

I am looking to enhance my CSS menu by incorporating a sub menu feature

I am having trouble getting my submenu to slide to the right horizontally. I have tried various CSS menus, but they are causing issues with my webpage. Here is the HTML code for the menu: <li class="widget"> <h2>Categories</h2> & ...

cssdrop-down-menumenu

Guide to collapsing the hamburger style menu in React-Bootstrap when a link is clicked within it

In my development projects, I utilize the react-bootstrap library and am currently working on a website where all the content is contained on a single page. As a result, all of my links point to different scroll positions on the same page. However, I have ...

htmlreactjsbootstrap-4react-bootstrap

PHP and jQuery creating a three-tiered drop-down navigation menu

My task involves creating a jQuery dropdown menu using PHP-generated HTML from a database table of categories: cats (db table) <ul class="dropdown"> <?php $sql ='SELECT * FROM cats WHERE cat_parent = 0'; $result = $db->s ...

phpjqueryhtmlmysqldrop-down-menu

Organizing Angular Material Styles using Namespacing

In an attempt to develop reusable components with Angular 1.4.3 and Angular-Material 1.0.5, the goal is to seamlessly integrate these components across various applications. However, a challenge arises as the Angular Material CSS contains styling rules th ...

javascriptcssangularjsangular-material

The <map> <area> element functions properly only in webkit browsers

Here is some HTML code: <div id="wrap"> <div id="main-content"> <div class="container"> <h1 class="logo">Mysite</h1> <img id="links" src="images/links.png" usemap="map" width="946" heigh ...

html

The interaction of flex-box in the presence of absolute positioning

Hey everyone, I need some help understanding why the flexbox is behaving oddly in this code snippet. 1. <!DOCTYPE html> <html> <head> <style> body{ position: relative; } .container { ...

htmlcssflexbox

What is the best method to remove the x and up/down arrow components of an input date field?

My main objective is to have the orange triangle display in the box, but I'm unsure if CSS or another method is needed to remove the two elements on the left side of the triangle. Is there a way to achieve this? Currently, I am using the input type d ...

htmlcssinput

Is there a way to execute a POST command in HTML without utilizing a form tag?

Currently, I have a form that gathers input from the user and redirects to a new page upon submission by clicking a button. However, I am looking for a way to automatically open this destination page when the current page loads, without the need for manual ...

htmlposttags

Label text will not be wrapped in front of the label (bootstrap)

I'm struggling with some css coding. I want the text to wrap so the label is positioned on the middle right of the box, similar to this example: . However, currently it looks like this: http://jsfiddle.net/yuvemL1z/ and the label ends up being pushed ...

htmlcsstwitter-bootstrap

What is the process for incorporating a scrolling feature into my HTML page?

I need to display the following content on my website: What code do I need to add in order to achieve this? I tried using the code snippet below but it did not work as expected: <td nowrap align="left" style="word-wrap: break-word"><pre style="w ...

htmlcss

Placing buttons on top of a video within a div container

I am facing a challenge with implementing custom controls on a video embedded in my webpage. I have tried setting a div to absolute position for the buttons, but they are not clickable. Is there a way to achieve this without using jQuery? I need the butto ...

javascripthtmlcssbuttonvideo

Show the entered user data in a separate Div when the button is clicked

Whenever a button is clicked, I am currently able to show the user input from the textbox. However, it always displays in the same Div. The HTML file with the textbox and button- <input type="text" name="inputText"><br> <tr> &l ...

htmlangularjsangularjs-ng-click

Guidelines for placing an HTML element in relation to another HTML element using CSS or JavaScript

Is there a way to position an HTML element in relation to another using CSS or JavaScript? I have attempted to copy the inner HTML of the "second-element" and append it inside the "first-element", but this approach is causing issues with other functional ...

javascripthtmlcsspositioncss-position

Custom CSS file for individual tenants in the Twig main template

Our Symfony 2.4 application is a multi-tenant system, meaning we share the same codebase among several organizations and differentiate access by domain name. For example: organization1.domain.com organization2.domain.com organization3.domain.com We util ...

phpcsssymfonyassetic

What causes an iframe to scroll horizontally when scaled?

I'm in the process of resizing an iframe element on my webpage using a CSS media query to adjust its dimensions. However, when I scale it down and interact with the iframe, my webpage starts scrolling horizontally. The issue is evident when using Chro ...

cssiframescrollscalescaling