How can I eliminate the space between two div elements?

Having a question that I couldn't find an answer to on Google...

I am looking to eliminate the gap between DIVs in my small PHP application. The DIVs display user images and other information, with a width of 250px and height set to auto since the content length varies. As the number of DIVs is fetched from MYSQL, I am unsure about the exact count.

Check out a screenshot of my webpage: https://i.sstatic.net/r8P5Y.jpg

Here is the code snippet:

<style>
#det
{
width:250;
height:auto;
max-height:400px;
border-bottom:3px solid darkred;
background-color:white;
float:left;

padding:0px;
margin:0 auto;
border-radius:5px;
}

HTML

<div id='det'>
<img src='$user_image'><p>some text</p>
</div>

I want to remove the gap between DIVs to achieve a magazine-style layout similar to masonry.desandro.com. Although I have used float:left, it's not functioning correctly, possibly due to the unset height property. Is there a solution to this issue without specifying the div height?

Thank you

htmlcss

Answer №1

To properly display elements of variable heights, consider using a flex fluid layout.

.main-container {
  display: flex;
  flex-wrap: wrap;
}

.sub-item {
  width: 200px;
  flex-grow: 0;
  flex-shrink: 0;
}

https://jsfiddle.net/abc123xyz/

Answer №2

To solve your issue, it is recommended to use the CSS property display:inline-block; instead of using float:left;.

.details{
width:250;
height:auto;
max-height:400px;
border-bottom:3px solid darkred;
background-color:white;
display:inline-block;
padding:0px;
margin:0 auto;
border-radius:5px;
vertical-align:top
}

Visit this JSFiddle link for more information.

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

Guide to altering the color of an href element when clicked using Jquery

I am looking to modify the color of the selected language when clicked. See my code snippet below: $(document).ready(function(){ $("a[href*='lang']").click(function(e) { e.preventDefault(); $('#header-top a').remove ...

javascriptjqueryhtmlcss

When a PHP if statement is triggered by reading a text file, it activates a checked

I am working on a PHP project that involves an on-off button and a txt file. The goal is to have the button disabled (with 'unchecked' echoed) when the value in the txt file is true, and enabled (with 'checked' echoed) when the value is ...

phphtmlbutton

Adjust the color and font style of the title text in the dialog box

I need assistance in altering the font and color of the title within a dialog box. I am looking to modify the font, size, and color. What steps should I take? Below is the code snippet: ivworknggroup.setOnClickListener(new OnClickListener() { ...

androidcssdialog

Instructions on utilizing clean-css with Node.js to process incoming requests

I need help finding a way to pipe request output into clean-css for minification and then return it as a response. The application I am working on is using restify framework. Here is an example of what I'm trying to accomplish: var url = "http://www ...

cssnode.jsrequestminifyclean-css

Creating an active tab using Material UI on a particular route

I've encountered an issue with Material UI tabs and need help figuring out how to resolve it. I have a navbar with three different tabs that link to separate URLs, but two of them are quite similar. Take a look at my code snippet below: <Tabs indic ...

javascriptcssreactjsreact-nativematerial-ui

Display a list of personalized post types and emphasize the item that is currently being viewed

I've created a unique type of post called 'product'. Every product page has a sidebar listing all products, with the current product displayed in bold text. For instance, when viewing product 3, it should appear like this: Sidebar Pr ...

phpcsswordpress

Display HTML content within designated fixed-column sizes

Looking to divide the content of an HTML file into multiple fixed size columns, both in terms of height and width, then display it in a Webview. I attempted employing the CSS properties mentioned below, but couldn't get it to function as desired. -we ...

javascriptandroidhtmlcss

How can I dynamically adjust the CSS gradient values to reflect changes in my progress bar's value?

The CSS code in my stylesheet is customized to style the progress bar in Google Chrome with a gradient effect. progress[value] { width: 100%; height: 40px; margin: 0 0 3em; border: 4px solid #000000; } progress::-webkit-progress-value { b ...

javascripthtmlcssprogress-barprogress

"Enhance your design with a stylish hover effect using

Can you have markup like this while also having a background overlay on hover? <figure class="gallery-item"> <div class="gallery-icon landscape" style="background-color: #333;"> <a href="www.google.com"> <img src ...

htmlcss

Efficient method for transferring element text to title attribute using AngularJS

I currently have a similar setup within a table: <tr ng-repeat="book in books"> <td title="{{book.title}}">{{book.title}}</td> <td title="{{book.author}}">{{book.author}}</td> </tr> To handle overflow, I am using C ...

javascripthtmlangularjs

"The JQuery .validate method is not compatible with this property or method" - error message displayed

I seem to be facing a problem that I can't seem to solve. I keep getting an error message that says "Object doesn't support this property or method" while using jquery-1.10.4. The .validate method is not functioning properly for me. Any assistanc ...

javascriptphpjqueryhtml

Adjust the height of column divs to equal the height of their parent container

Looking for a solution: I have multiple divs in a column layout and I want them to expand to match the original height of the parent. The parent's height is not fixed as it is part of a flex-based page design. Can this be done? In the example provid ...

cssflexbox

Expansion Issue: Div in Main Section Not Adapting to Parent Width in Bootstrap Flex Layout

I have a Bootstrap 5.2 header/main/footer layout where I want the main section to expand and fill the page between the header and footer completely. The code below is currently working: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a ...

htmlcssflexboxbootstrap-5

What sets minifying CSS apart from compressing CSS?

Recently, I was focused on enhancing my website's performance and decided to run a google developer performance test. The results were positive overall, but the google analyzer recommended compressing the CSS files for even better performance. Up unt ...

htmlcssperformanceperformance-testing

Uniform height across certain thumbnail images

I have hit a roadblock while working on a project, and I am unable to resolve it :) I am using the Bootstrap grid system and I want to display thumbnails within a content section, with six thumbnails per row. The issue is that while the text below each ima ...

csshtmlheightmultiple-columns

Overflowing is caused by excessive padding within the text field container

When trying to apply padding to a text field, I am facing an issue where the right side overlaps with the main content. How can I resolve this? <div class='container_section'> <input type='text' placeholder='name' ...

htmlcss

Filtering a table in Angular2 based on two inputs with a custom pipe

Within my table, I have two columns that display dates as strings. My objective is to filter this table based on input from two ngb-datepickers (with a default value of null). Despite importing a custom pipe into declarations in app.module.ts, I keep encou ...

htmlangulartypescriptangular2-pipe

My AJAX request seems to be redirecting to my PHP file instead of simply returning the response text. What could be causing this issue?

I am currently working on a project for my Web Engineering course and I am incorporating jQuery to execute an AJAX request to my PHP file using the POST method. The task specifies that "each time the [submit] button is pressed, the form data should be disp ...

javascripthtmljqueryajaxweb

Having difficulty developing a website layout design

Struggling to create a web layout using only HTML and CSS. Seeking assistance with the following code: * { margin: 0; padding: 0; box-sizing: border-box; } section { min-height: 100vh; width: 100%; display: flex; justify-content: center; ...

htmlcsswebbootstrap-5web-frontend

Failure to display JavaScript variables within a div element

I'm having trouble displaying my JavaScript variable inside a div column. The value is not showing up, even when I use the inspector tool. However, if I display it outside of any div tags, at the top of the page, it works fine. $(document).ready(fu ...

javascripthtmlbootstrap-4