What is the best way to ensure that my CSS3 columns break only at line breaks?

Currently, I am developing a webpage that involves multiple fieldsets within a single form page along with the utilization of CSS3 columns.

However, an issue arises where the columns wrap in a manner that causes part of a fieldset to be stranded when transitioning to the next column.

As I work on this project, I notice in Chrome 15 that a fieldset legend appears disjointed, with the top half of the letters at the bottom of one column and the bottom half at the top of the next column. Interestingly, I do not encounter this problem in Firefox 7, which may be due to differences in how each browser handles line breaks or block elements during column rendering.

I suspect that this issue is not specific to Chrome but rather stems from a lack of clear specification on how column wrapping should occur.

Hence, I aim to explicitly instruct all browsers supporting columns to break between these fieldsets. Thank you for your cooperation.

To illustrate this situation, I have created a mockup. Please refer to this jsFiddle. (Although it may look slightly different from my current project, the bug remains consistent.)

google-chromecss

Answer №1

It appears that webkit now includes column-break-inside, allowing you to incorporate it into the fieldset style to prevent splitting across columns

fieldset {
    border: 1px solid #ddd;
    padding: 1.0em;
    -webkit-column-break-inside: avoid;
}

Answer №2

For those stumbling upon this forum in search of a solution for Firefox compatibility, here's a heads up.

As of the current moment, Firefox version 22.0 does not recognize the column-break-inside property, even when prefixed with -moz-.

However, there is a simple workaround: Utilize display:table;. Another option is **display:inline-block;, but be aware that using these alternatives may result in losing the list style item or bullet icon.

**Moreover, one issue that may arise with display:inline-block; is if the text in consecutive list items is short, causing the bottom item to wrap and align horizontally with the one above it.

Ultimately, display:table; proves to be the more favorable solution between the two.

For additional information, check out this resource:

Answer №3

To prevent breaks inside elements, consider using break-inside: avoid;

Here is the complete syntax:

div {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

For more information, visit: https://example.com/css-tricks/break-inside

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

Does the display:flex property get passed down through inheritance?

I have been working on this code where I assigned a display:flex to my body element. My understanding was that all child elements within the body would automatically become flex items, considering the body is both a flex container and a wrapper for its chi ...

htmlcssflexbox

Modify the background color of fc-today

Searching for a current solution to this issue has been challenging. Today, I am attempting to modify the highlighted background in my project. My code includes the <FullCalendar> component nested inside <Box>: <Box flex={"1 1 100%" ...

cssreactjsmaterial-uifullcalendarsx

How can I locate the source of a slight sideways scrollability issue in HTML and CSS?

While creating my website in HTML/CSS, I noticed that there is a slight sideways scroll to it. Instead of perfectly fitting the screen, there are thin bars of white on each side that can be accessed by scrolling left or right. I am trying to determine the ...

htmlcss

What is the process for connecting the Facebook icon in Bootstrap 4 to my personal Facebook account, or the Google Mail icon to my Google Mail account?

When it comes to designing a webpage, I am looking to connect my Facebook account with an icon of Facebook, my Google mail with Google mail account, and my LinkedIn account with the LinkedIn icon. What is the code line needed to accomplish this task? ...

htmlcssbootstrap-4

The CSS Accordion seems to be the culprit behind the missing margin or border at the top of my page

Although everything on the page is functioning as desired, there seems to be a missing margin or border that is not causing much trouble. If there is a simple solution or an easy way to identify why this is happening, it would be greatly appreciated. Take ...

cssborderaccordionmargin

Warning: Potential Security Breach Detected - Chrome Notification

After launching my website on firebase hosting, I noticed a strange error when trying to login using the form created in webflow. Every time I attempt to log in, a popup from Chrome appears with a warning: Your password may be compromised - You just ent ...

google-chromevue.jsnuxt.jsfirebase-hostingwebflow

Using JQuery to swap out background images in CSS

I have been working on a slider that is supposed to fade one picture over another. The issue is that the background change seems to only work in the Dreamweaver preview and not in the actual browser. loop = setInterval(function(){ $("#slider").css("ba ...

javascriptjqueryhtmlcss

Can the default Bootstrap classes in the ExtLib application layout control be modified?

I am currently using the responsive Bootstrap theme in combination with the application layout control in extlib, but I have been unable to locate any documentation on whether it is possible to modify the predefined Bootstrap classes. In the example below ...

javascriptcssxmltwitter-bootstrapxpages

I am struggling to activate the hovering feature on my menu bar

I am having trouble making the hover effect in my navigation bar work properly. Even though I can separately make the 'display: none' and hover effects work, they do not function together. I am unsure of what mistake I might be making. Below is ...

cssdrop-down-menuhover

How can z-index and relative positioning be used to center a button with jQuery and CSS?

One issue I am facing is with a button that is located in the center of another div (container). When the button is clicked, some hidden divs appear within this container. Although they are present but initially set to display: none using CSS, and then sho ...

jquerycsspositionz-index

jQuery .CSS is not working for positioning the element at the bottom right corner!

I am struggling to create a basic Modal Box that can be minimized to the bottom right corner of the screen. I want to turn it into a plugin, but I'm having trouble getting the simple CSS to cooperate and position itself correctly at the bottom right. ...

jquerycssmodal-dialogpositioning

Is it possible to display a variety of color schemes in just one console.log()?

My task involves working with an array of hexadecimal values, "colors": ["#d5dd90","#e6bb45","#ef9770"] To log these out in different colors, I used the following method: colors.forEach((value)=>{ console.log(& ...

javascriptcssconsolestylingconsole.log

Navigation Icons Menu

I need to customize my navigation by adding a special area on the right side with just three icons: basket, search, and wishlist. Can anyone suggest the best approach to achieve this? I am currently using the Divi theme for my website. Furthermore, I atte ...

htmlcssnavigationicons

The Bootstrap 4 alpha 6 navigation bar is not being rendered properly on Google Chrome

Do you have a moment to check out this issue? It seems to be specific to Google Chrome. https://example.com/ Here is a snapshot of the problem: https://example.com/screenshot.png Take a look at the code snippet: <div class="collapse navbar-collapse ...

htmltwitter-bootstrapcssgoogle-chrometwitter-bootstrap-4

Is there a way to ensure a Javascript alert appears just one time and never again?

I struggle with Javascript, but I have a specific task that needs to be completed. I am participating in a school competition and need an alert to appear only once throughout the entire project, not just once per browsing session. The alert will inform ...

javascriptjqueryhtmlcssalert

Error encountered with Paypal code. Being redirected to error code 400

Hello everyone, I am currently working on creating a simple webpage and practicing how to integrate PayPal into our website. However, I seem to be encountering an issue where it is redirecting me to a 400 error page. Below is the code snippet that I have ...

phphtmlcsspaypal

Utilizing event delegation for JavaScript addEventListener across multiple elements

How can I use event delegation with addEventListener on multiple elements? I want to trigger a click event on .node, including dynamically added elements. The code I have tried so far gives different results when clicking on .title, .image, or .subtitle. ...

javascripthtmlcssevent-delegation

Show a button using CSS when the cursor is hovering

Expressing my gratitude to everyone! I need assistance with implementing a function in reactJS where the <button /> remains hidden during page loading and reveals itself when hovered over. Despite trying various methods, I have been unable to resolve ...

javascriptcssreactjsless

Bootstrap's innovative design for a data grid

I'm currently working on designing a Grid using bootstrap 3. https://i.sstatic.net/DZzcq.png My tools include html5, css, and bootstrap integrated with React.js. The main feature of my project is a data grid (specifically, a Fixed Data Table). ...

javascriptcsshtmltwitter-bootstrapreactjs

Adjusting the header and unordered list on resize

I need help with my portfolio website. I can't seem to figure out how to make my header and navigation menu stack on top of each other when the page is small, and then go back to their normal layout when the page is larger. Below is the HTML code I&a ...

jqueryhtmlcssresize