The floating left div displays oddly when it wraps onto the next line

I currently have a variable number of floating divs, ranging from 1 to 10. When I display either 1-5 or all 10, they appear correctly:

item1 item2 item3 item4 item5

item6 item7 item8 item9 item10

However, when I try to display around 7 of them, things start to look strange:

item1 item2 item3 item4 item5

                     item6

item7

Can anyone advise on how to resolve this issue? Here is an example of the div code being used:

<div style="float:left; margin-right:4px; margin-top:5px; text-align:center; padding:7px; color:#0066a4; font-size: smaller; width:100px;">
  <a href="#" onclick="getElectronicServiceCopy('10'); return false;"><img src="/images/images/Icons/Vehicle_Green.png" border="0"></a>
  <br>Vehicle
</div>

Thank you for your help!

csshtml

Answer №1

When looking at your code, it appears that you need to specify the height for your floated DIV.

Here is an example:

div{
 height:200px;
}

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

CSS. Absolute positioning in relation to a div element

I discovered a way to adjust the positioning of a div using jQuery. Check out this example. Is it possible to achieve the same result using CSS? UPDATE: I came across this solution. I also want the horizontal window scrollbar to appear if the fixed elem ...

htmlcss

Learn how to toggle the display of a div using jQuery, just like the functionality on the popular website

Visit Mashable here Below is the script I am currently using: $(document).ready(function(){ $(".show_hide5").mouseover(function(){ $('.selected').removeClass('selected'); $(this).next().fadeIn("slow").addClass(&apo ...

javascriptjqueryhtml

Discovering multiple classes in a CSS file can be achieved by using specific selectors and searching

I am attempting to phrase my question differently: As mentioned in a book: "multiple classes: p.testorosso.grassetto {color: red; font-weight: bold;} This rule will apply the specified styles to all elements that contain the names of the defined classes ...

css

What is the best way to interact with a hidden link using Selenium webdriver?

Whenever I try to access a specific link on a webpage, it is only accessible after selecting a filter button element. Filter Button Desired Link I attempted to locate the element using CSS Selector due to the presence of "include-out-of-stock" in the link ...

pythonhtmlseleniumselenium-webdriver

Ways to showcase tooltip text for an unordered list item?

When creating an unordered list, each element's text corresponds to a chapter name. I also want to include the description of each chapter as tooltip text. The Javascript code I currently have for generating a list item is: var list_item = document.c ...

javascripthtmlcss

Update the text on the form submit button after it has been submitted

Is there a way to change the text on a submit button after it has been clicked? I have a form with a button and I want to switch the text from "click" to "Next" once the form has been submitted. <form> <div class="form-grou ...

javascriptjqueryhtmlbuttontext

What is the best way to place an anchor tag with an image inside a bootstrap grid cell?

I am facing an issue with a 9-cell grid that contains images using Bootstrap columns. The grid is responsive and functions perfectly when only images are present. However, I want to make the images clickable by placing them inside anchor tags (<a>). ...

htmlcssbootstrap-4

Feature for jotting down notes, creating a break between lines without any information present

I'm currently working on implementing a note-taking feature for my web application. However, I have encountered two issues: Firstly, I am struggling to identify line breaks within the text. While I can hardcode text with line breaks, when a user clic ...

javascriptjqueryhtmlcssbootstrap-4

Using animation.width() in Javascript to create a countdown

Currently, I am working on creating a visual countdown for my users to indicate when an animation will finish. The code snippet below shows my initial attempt: function setClassAndFire(){ timer = setInterval(function () { t--; ...

javascriptcssanimationcountdown

What is the process for obtaining Style.css, additional CSS, and JavaScript files from a live single page website?

I am currently facing a challenge with a live single page website where I need to make some fixes. Unfortunately, I am unable to access the Style.css file, along with other css and javascript files. Although I managed to save the html file by using Ctrl+s, ...

javascriptjqueryhtmlcss

Unexpected behavior in Bootstrap 4 table column sizing issue detected

Recently delving into the realm of bootstrap and HTML/CSS scripting, I've been working on creating a simple HTML table with one row and three columns. Each column is supposed to evenly take up one third of the table's space. However, I'm fac ...

csshtml-tableresponsivebootstrap-4dynamic-columns

How can I effectively retrieve the JWT in a node environment?

I've successfully set up JWT authentication using Node.js. After the user signs in, Node.js generates a JWT and sends it back to be stored in the localStorage. However, I've encountered an issue when trying to access this token within the express ...

javascriptangularjsnode.jshtml

The dominance of CSS over other attributes in styling

Imagine having a main body text div and a navigation div for a website. What if you want to make links in the body text green instead of blue, but have the links in the navigation div be red? If you use CSS to make links green, then all links turn green. ...

cssattributes

CSS-Styled Vertical Timeline

I have been working on creating a vertical timeline with icons embedded within it. I initially used this as a reference point. I was able to achieve the desired layout by adding extra spans inside the div. However, the end result appears somewhat cluttere ...

htmlcss

An issue occurred with the DOMException while trying to execute the 'setAttribute' function on the 'Element': '{{' is an invalid attribute identifier

Currently, the code is under development and some methods are still empty while the *ngIf directives may not be correct in terms of logic. However, even with these issues, I encountered the same error without bothering to remove them at this stage. While ...

javascripthtmlangular

Do not transfer any files during the migration process from NGINX to Apache

I have a specific URL structure: http://www.example.com/folder/index.php?dir=dir1 I want to make it accessible from: http://www.example.com/folder/dir1 To achieve this, I set up rules in my .htaccess file located in the 'folder' directory: O ...

htmlapache.htaccesshttp-redirecturl-rewriting

What is the best way to increase the height of an image beyond the limits of its container, causing it to overlap with other elements

My challenge involves creating a horizontal scrolling list of movie posters. I want the posters to grow in size when hovered over, expanding outside of their container and overlapping other elements. I attempted to use 'position: absolute' on the ...

cssangularhovercss-transformshorizontal-scrolling

What is the reason for the absence of absolutely positioned elements in the render tree?

Recently, I came across some information about the render tree: As the DOM tree is being created, the browser simultaneously generates a separate tree known as the render tree. This tree consists of visual elements arranged in the order they will ap ...

javascripthtmlcssgoogle-chromebrowser

How to Blend Pseudo-classes in CSS?

If I want the selected text in a link to turn red when hovered over, can I achieve that using the following CSS code? .abc:hover::selection {color: red;} Also, if I have the following link: <a href="123" class="abc">4567890</a ...

csscss-selectorspseudo-class

How to achieve a Dropbox-inspired footer effect using CSS?

Take a look at dropbox's website here: Have you noticed how the footer with "Learn more" remains fixed at the bottom regardless of window resizing until you click or scroll down? position: absolute; bottom: 50px; left: 0; width: 100%; text-align: ce ...

htmlcss