When I add text to div boxes, they begin to drift downward

After creating four div boxes with content, I encountered an issue. Initially, when inserting filler text, everything seemed fine. However, as soon as I started adding actual content into the first box, the other three boxes shifted downwards by the same amount.

Another concern of mine is regarding the spacing of the text within the boxes. Is there a way to make the text more compact like in the other three boxes that contain filler text? I've heard something about using CSS break properties, but I'm not sure if that's the solution.

.skillcontainer {
max-width: 23%;
min-width: 200px;
display: inline-block;
position: relative;
margin-left:1.4em;
}

Here you can see the issue illustrated. Additionally, if you resize the window, you'll notice empty space below 22% width.

htmlcss

Answer №1

You don't have to float them, simply include this in your code:

 .wrapper {vertical-align:top; }

This will align the internal items as inline-blocks.

JS FIDDLE

Answer №2

Let them flow!

.skillcontainer {
max-width: 23%;
min-width: 200px;
display: block;
position: relative;
margin-left: 1.4em;
float: left;
}

Check out the latest fiddle here.

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

How to use Python Selenium to locate the parent element

Here is a snippet of my HTML code: <li> <div class="level1"> <div id="li_hw2" class="toggle open" </div> <ul style="" mw="220"> <li> <div class ="l ...

pythonhtmlseleniumxpath

Display information upon the clicking of a button and update the color of the selected button

When a button is pressed, I want to display content and change the color of the active button. Currently, I can do each operation individually, but I'm struggling to merge these functionalities. This is how my script looks like for displaying the con ...

javascripthtmljquerycss

Launch a popup modal box from within an iframe and display it in the parent window

I'm facing a challenge with opening a modal dialog in the parent page from an iframe. The button to open the modal dialog resides in the iframe, but the modal div is located on the parent page. Here's a snippet of my parent page: <html xmlns ...

jqueryhtmliframepopupmodal-dialog

Flashing on objects, Chrome-exclusive, utilizing background-blend-mode exclusively

Our website, www.desirio.com, utilizes a background-image on the body with the following CSS property: background-blend-mode: luminosity An issue we have noticed in Chrome is that when hovering over elements, strange white lines randomly flash on the scr ...

cssgoogle-chromebackground-blend-mode

Creating a layered effect: Adding an image onto another image using HTML and CSS

Wondering if it's possible to create an overlaid effect with an image and text inside of an <img> element, similar to the example image below. Utilizing Bootstrap for this design. This is how I am attempting to achieve it: HTML <div class= ...

htmlcssimagetwitter-bootstrap

Modify the width measurement from pixels to percentage using JavaScript

Looking for some help with a content slider on my website at this link: . I want to make it responsive so that it adjusts to 100% width. I managed to make it responsive by tweaking some code in the developer tools, but now I'm stuck. The bottom two p ...

javascriptjqueryhtmlcssresponsive-design

Scrolling container embedded within a parent with absolute positioning

I have encountered a tricky situation with an absolute positioned div and its nested div having overflowing content. My goal is to enable vertical scrolling for the child div, however, my attempts so far have been unsuccessful. The challenge here is that I ...

htmlcss

Creating a customizable theme for a website built with Bootstrap, incorporating changes to brand colors and more, by utilizing a .less file

I have built my asp site using bootstrap as the client-side CSS framework. I am currently working on implementing a feature that allows users to customize their site's brand color and other aspects, with these changes being saved permanently. While I ...

htmlasp.netcsstwitter-bootstrapless

What is the best location for storing css files in Laravel?

I've come to realize that I can easily make changes to the app.scss file in my Laravel projects and see those changes reflected by running npm run dev or npm run watch. However, I'm faced with a dilemma when dealing with multiple .css files. Whe ...

csslaravel

Text spilling out of a floated division

I'm currently working on a fluid layout design, but I've encountered an issue with the left menu text overflowing. I can't seem to get overflow:hidden to work properly. You'll notice that in the blue area, I have highlighted the text t ...

csshtmloverflow

Load Angular template dynamically within the Component decorator

I am interested in dynamically loading an angular template, and this is what I have so far: import { getHTMLTemplate } from './util'; const dynamicTemplate = getHTMLTemplate(); @Component({ selector: 'app-button', // templat ...

javascripthtmlangulartypescript

CSS: Turn off the custom styling for radio buttons

My dilemma lies in the custom radio button I've created using CSS. The issue is that while I can select the radio button, I cannot deselect it. Here is a snippet of the CSS code I used to create the custom radio button: input[type="radio"]:checked:be ...

htmlcss

Discover the CSS auto height value using JavaScript

Is there a way to utilize JavaScript in determining the value set for auto height in CSS? My development stack includes Grails and jQuery. For instance, consider the following CSS: .tool-preview { height: auto; } ...

javascriptcss

Using HTML and CSS to generate an alpha mask on top of an image

I am currently working on a website and I am looking to create an effect where an image is masked by an overlay. The goal is to achieve a "fade out" effect, without any actual animation, but rather make it appear as if the image is gradually fading into th ...

javascripthtmlcssfademasking

Eliminate the standard blue border that appears when control-clicking on table elements

I've encountered this question before, but unfortunately none of the solutions provided have worked for me. Some things I've attempted are: Using event.preventDefault() - did not produce the desired result. Removing user-select from CS ...

javascripthtmlcss

A layout featuring nested buttons and links within a card element, utilizing the power of Link in NextJs

After extensive searching on S.O., I have been unable to find a solution that works flawlessly. The issue at hand involves a card component in a NextJs application that is encompassed within a <Link> tag. Additionally, there is another <Link> t ...

csstypescriptnext.jshyperlinkcard

How can a Vue component be created with a template that solely consists of a property's text?

Looking for a way to incorporate plain text within a Vue component template area? The current method involves wrapping the text in a div, but this causes layout issues when concatenating components with other text fragments. This results in awkward spacing ...

htmlvue.jstemplatesvue-component

Develop a radio button filter utilizing the "Date of Creation" attribute, implemented with either jquery or JavaScript

I am currently utilizing a customized Content Query Web Part to load a series of list items. Each of these items has an XSLT attribute known as the Created Date. Shown below is an example of the markup: <div class="item" createddate="2014-01-22 13:02 ...

javascriptjqueryhtmlxsltfiltering

Populating the DOM with a mix of strings and HTMLDivElements by iterating through an array using *ngFor

I have a specific layout requirement that needs to resemble this example: https://i.sstatic.net/4kP2q.png The desired layout should utilize CSS properties like display: grid; someFunction(data) { this.data = data; ...

htmlangulartypescriptinnerhtmlngfor

Instantly see changes without having to manually refresh the screen

I need help figuring out how to update my PHP webpage or table automatically in real-time without requiring a manual refresh. The current functionality of the page is working perfectly fine. Specifically, I want the page to instantly display any new user ...

javascriptphphtmlajax