Numerous div elements are situated closely together, featuring small pockets of blank spaces in between each

I am facing a challenge with multiple boxes (div) of varying sizes. Below is a screenshot illustrating the issue:

Here's my code:

HTML

<div id="categories_container">
    <div class="main_category">
        <div class="categories_title"><a href="#"> <img src="template/images/image.png" alt="" /><h2> Title </h2></a>

            <div style="clear:both;"></div>
        </div>
        <ul>
            <li> <a href="#" title=""> item </a> 
            </li>
        </ul>
    </div>
</div>

CSS

div#center_container {}
div#categories_container {width:65%; margin:5px; float:left;}
div.main_category {width:197px; float:right; margin:0 10px 10px 0;}
div.categories_title img {float:right; margin-left:5px}
div.categories_title h2{float:right; font-size:20px;}
div.main_category ul {list-style-type:none; margin:0; padding:0}
div.main_category ul li {margin: 0 0 .2em 0;}
div.main_category ul li a{color:#6E6B64; font:normal 18px tahoma; display:block; background-color:#f4f4f4; padding: .2em .3em;}
div.main_category ul li a:hover {color:#F37020; background-color:#e7e7e7;}

I aim to eliminate any space between the boxes regardless of their individual sizes.

htmlcss

Answer №1

If you're looking to eliminate unnecessary spaces, consider organizing your categories into three separate containers.

HTML

<div id="categories_container">
    <div class="col col1">
      <div class="category">cat</div>
      <div class="category">cat</div>
    </div>
    <div class="col col2">
      <div class="category">cat</div>
      <div class="category">cat</div>
    </div>
    <div class="col col3">
      <div class="category">cat</div>
      <div class="category">cat</div>
    </div>   
</div>

CSS

.col {
   width: 33%;
   float: left;
}

#categories_container {
   overflow: hidden;
}

Check out the demo here!

Answer №2

Swap this out 

div.main_category {width:197px; float:right; margin:0 10px 10px 0;}

with

div.main_category {width:197px; float:right; margin:0 10px 0 0;}

margin: TOP RIGHT BOTTOM LEFT

Answer №3

Have you verified if the height of the top row is being defined by the #categories_container or another enclosing class?

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

"Struggling to make the 'overflow: hidden' property work for an absolutely positioned

I'm struggling to conceal an absolutely positioned image within a CSS grid layout. Below is the code snippet: HTML: <div class="relative-parent"> <div v-for="item in 12" class="hiding-parent"> <div c ...

javascripthtmlcssvue.js

What is the best way to insert additional text into an li element without replacing the text that is already there using

Currently, I am adding to a list and need to prepend text to an li item whenever the user clicks on a radio button. I attempted using the JQuery .text() function but found that it overrides the existing content instead of appending. $("#" + condition + "- ...

jqueryhtml

Secure your website against XSS attacks with DOMPurify

Currently I am working on resolving a cross-site scripting (XSS) vulnerability using DOMPurify. The issue lies in the URL provided below: https://stage-xyzmysite.com/login/?rUrl=javascript:alert('hi'). In order to create a proof of concept, I am ...

javascripthtmlurlxssdompurify

The placement of the sliding navigation menu is consistently positioned beneath the header

I created a jQuery menu that's also available on JSfiddle here: $(document).ready(function () { $(".navigation_button").on('click', function () { var $panel = $(this).next('.panel'); if ($panel.is(':visible ...

jqueryhtmlcss

Dynamic Cell Class Assignment in Ag Grid

My Div's dimensions can change based on user interaction, with the div containing an ag-grid component. Initially, the div/grid loads in a compressed size, so I've applied specific classes (like small font-size, height, padding, etc.) to eliminat ...

htmlcssangularag-gridag-grid-ng2

Design question: how can we create a layout where the Header, Content, and Footer all have expanding background colors but still maintain centered content?

In my layout, I wanted everything to be centered using the "margin=0 auto" technique. However, I also needed the header and footer to expand to both sides when the browser window is enlarged. The challenge was that if I centered everything, the black backg ...

csslayoutcolorsbackground

Center the form on the page using Bootstrap

My bootstrap login form is currently appearing at the top of the page, but I want it to be centered. <div class="container"> <div class="row text-center"> <div class="col-sm-6 col-sm-offset-3 well offset4"> <div class=""&g ...

cssangularjstwitter-bootstraptwitter-bootstrap-3bootstrap-modal

Creating a tiny arrow using CSS

Can anyone advise on the best way to create a small arrow design using CSS? I have tried using a regular closing > arrow, but it's not quite what I'm looking for. https://i.stack.imgur.com/7uLMG.png ...

htmlcss

Show the most recent image from a folder in real-time

Looking for a solution to automatically display the latest image from a folder without refreshing the page? Check out this code snippet that achieves just that: <?php foreach (glob('/home/pi/camera/*.jpg') as $f) { $list[] = $f; } sort( ...

phphtml

Exclude a particular row from a table when there is no identifier

My PHP code generates a basic table. <table border="1" id="control> <tbody> <tr>...</tr> <tr>...</tr> <tr>...</tr> //Row #3 <tr>...</tr> <tr>... ...

javascripthtmlcss

Stop Bootstrap IE menu from closing when scrollbar is clicked

When using IE, the dropdown menu closes when clicking on the scrollbar. However, it functions properly when scrolling with the mouse wheel. To see the issue in action and potentially offer a solution, you can visit this Codeply link: I'm seeking sug ...

javascriptcssinternet-explorercross-browserbootstrap-4

Changing position of element upon appearance of span in React

Currently, I am working with React and facing an issue where a span element appears whenever a user hovers over a text element. The problem is that the existing text shifts leftwards when the span appears (to the right of the text). The desired behavior ...

javascripthtmlcssreactjsmaterial-ui

How can I organize a dictionary based on a specified key order in Jinja2?

Suppose I need to showcase the following data: • b is foo • a is bar • c is baz ...however, my dataset is structured like this (or any other sequence due to JSON's flexibility): { "a": "bar", "b": "foo", "c": "baz" } How can I utilize Jinja2 ...

pythonhtmldjangojinja2

Is it possible to leverage specific client-side Javascript APIs on the server-side?

Exploring APIs designed for web browsers that require their .js code to return audio streams. In a broader sense, these APIs provide byte streams (such as audio) for playback in the browser. Is it possible to use these APIs in server-side Javascript frame ...

javascriptnode.jshtmlbrowserhtml5-audio

Using jQuery to encapsulate HTML within a div tag

I am looking to insert some HTML markup into my webpage using jQuery. I want to wrap the highlighted yellow code below with <div class="section">...</div>. Here is an example of what I need: <div class="section"> <div>...< ...

javascriptjqueryhtml

Utilize Android accelerometer data to bring objects to life with animation

Utilizing an Android app, I am streaming accelerometer data to a Python script on my PC. The data is then saved to a text file. My goal is to utilize Javascript and jQuery to animate a 3D CSS cuboid (representing the device) to replicate the movements capt ...

javascriptandroidjquerypythoncss

Utilize jQuery to showcase elements in a dropdown menu

Hey everyone, I'm working on an ASP.NET MVC4 project and I'm using a jQuery script on the edit page. However, I am encountering an issue with displaying elements on the page. Here is the initial HTML markup of my dropdown before any changes: & ...

javascriptjqueryhtmlasp.netasp.net-mvc-4

Is there a way I can detect a browser timeout and display a custom error message?

My webpage in classic asp contains a link to a local IP address, shown below: <a href="http://192.168.1.89">Link</a> When the local IP address is not available, the web browser eventually times out and shows its own error message. I ...

javascripthtmlasp-classictimeout

How can I insert a item into an Array using JavaScript code?

My instructor set up an array in my JavaScript file that is off limits for me to modify. My task is to add new objects to it through code without directly manipulating the existing array. Here's a snapshot of what my array contains: const words = [{ ...

javascripthtmlcssarraysobject

Elements with inline-block display not aligning horizontally next to each other

I am puzzled as to why the two sections, section.structure and section.specificity, are not aligning properly. It seems that when I reduce the width, they line up correctly at a certain point which I haven't identified yet. My goal is to have the wid ...

htmlcss