The column-count attribute in CSS3 allows for the creation of

I have a short CSS code snippet that sets the styles for a specific div. It includes properties such as border style, margin, background color, text color, padding, alignment, and column layout.

 div#mydiv{
  border-style: none; 
  margin-bottom: 1em;
  background-color: #F6F6F6;
  color: #000;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: justify;
  column-width: 15em;
  column-gap: 2em;
  column-count:2;
  -moz-column-width: 15em;
  -moz-column-gap: 2em;
  -moz-column-count:2;
  -webkit-column-count:2;
  -webkit-column-width: 15em;
  -webkit-column-gap: 2em;   
  box-shadow: #ccc 0 0 15px;
  }

When viewing this code on Firefox, it correctly displays 2 columns of text. However, when viewed on Opera, it shows 3 columns instead of 2, which is unexpected.

In Firefox:

bla bla
bla bla
bla bla
bla bla
bla bla

In Opera:

bla bla bla
bla bla bla
bla bla bla

In Internet Explorer:

blablablablablablabla

I'm curious to know what might be causing this issue in Opera and if there is a way to make Internet Explorer display the text in columns as well.

Thank you!

firefoxcssoperaexplorer

Answer №1

What is the purpose of css3? If not needed, you can achieve similar results using basic css styling:

#container {
    width:800px;
}

#left {
    float:left;
    width:400px;
}
#right {
    float:right;
    width:400px;
}

Additionally,

Here is the HTML structure:

<div id="container">
<div id="left">..</div>
<div id="right">..</div>
</div>

Note that the code above may not be exact, but it serves as an example.

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

webdriver cannot successfully select a hyperlink in Firefox

package testingproject; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; public class LinkChecker { public static void main(String[] args) ...

javaeclipsefirefoxseleniumselenium-webdriver

CSS files loaded from an external source onto Google Chrome browser are not being properly

There seems to be an issue with my external CSS style not reflecting in Chrome, even though it is downloaded. When I manually change the stylesheet inline, it works but not otherwise. Interestingly, it functions fine in the Firefox browser. Here is how I ...

cssangulargoogle-chrome

When hovering over a single list item, only the top border will be displayed without affecting the

Check out the live link provided below: I am attempting to add a border and later an arrow in the middle on hover in the menu. However, the current code places a border over the entire menu, with individual list items on top of that. #menu ul li { margin ...

cssmenuhover

The parent div's height is not compatible with the CSS grid

I created a CSS grid layout featuring a header, side menu, and scrollable content. My goal is to test this layout in a container div where I've specified the width and height. The layout adjusts well according to the container's width, but seem ...

htmlcsslayoutcss-grid

How to perfectly align responsive email on iPhone 6

My email design appears aligned to the left on iPhone 6 even though I have used align="center" on the tables and TD's. In my media queries, I have specified a width of 320px with the main table set to width="100%". @media only screen and (max-device- ...

htmlcssmedia-querieshtml-emailiphone-6

Sections stacked with Bootstrap cards are located beneath a different section

Objective The primary aim is to ensure that all sections display correctly on the mobile version of the website. Challenge An obstacle I am currently facing is: Full width (Looking good) https://i.sstatic.net/EDm3N.jpg Mobile version (Issue) There i ...

htmlcssbootstrap-4

Animated mosaic pattern menu design

Is there a way to achieve this effect with a sketch? Note: I would like to add hover animation to the borders if possible. I attempted to do it using the following code: clip-path: polygon(0 0, 100% 0, 92% 86%, 6% 100%); However, the shapes created by ...

javascriptjqueryhtmlcsssvg

How to verify if a node contains plaintext with jsoup?

Is there a way to determine if a node in jsoup has plain text without including link text, instead of using the Element.hasText() method? Any suggestions would be greatly appreciated. Thank you ...

javahtmlcssdomjsoup

What is the best way to adjust the position of an image background within a container without affecting the container's own placement?

While working on a registration form, I encountered an issue with moving the background image within a container. Despite adding position: relative and using top: with a negative value to shift the image, the entire container moved instead of just the back ...

htmlcssbootstrap-5

Linking the location of the pop-up to the currently selected text box

I am currently experimenting with setting the top and left values relative to the selected_element (which is active at the time of triggering the popup) in a manner similar to a tooltip. I attempted to use $().position() in combination with jQuery, but it ...

javascriptjquerycssposition

Having trouble transferring my background image from my FTP to my website

I'm having trouble setting a background image for the header on my website. It seems that nothing is loading. The hosting service I use has disabled linking images via external URLs, so I tried uploading the image to Filezilla, but that didn't wo ...

htmlcssftp

Design adaptable HTML backgrounds

Hello, I am working on a webpage that uses two background images. Here is the CSS I'm using: body{ background: url('<?=base_url();?>/assets/header_bg.png') no-repeat, url('& ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the method for creating text outlines using html5/css3?

I have been experimenting with using shadows to outline text, which is a solution I came across in various Stack Overflow threads. However, support for text-outline and text-stroke features is currently limited. I am encountering an unusual issue with on ...

htmloutlinestrokecss

How to use image source and mouse hover effects in CSS3

Can we create a CSS3 class for the src, onmouseout, and onmousehover properties? <img src="http://www.example.com//images/pic.png" onmouseout="this.src = 'http://www.example.com/images/pic.png'" onmouseover="this.src = 'http://www.examp ...

htmlcssasp.net-mvc

Styling a multilevel list with CSS that includes a combination of

Hello everyone! I am looking to create a mixed multilevel list in CSS, similar to the one shown in this image: image description here. I have attempted the following code snippet, but it seems to apply the counter to unordered lists: ol { counter-res ...

htmlcss

What is the best way to make a drop down menu list appear when I click on the parent li, and then show the sub li using JavaScript?

I have a code that includes an image, HTML, and CSS code. Can anyone please tell me how I can set up a drop-down menu list to open the sub <li> elements when I click on a parent <li> using JavaScript? You can see the appearance of the code in t ...

javascriptphphtmlcss

Tips for aligning two TD elements with varying lengths in the same row:- Consider setting a specific width for each

Can anyone assist me in properly aligning this structure? I am looking to reduce the height of the "Todays Special" td significantly. The size of this td expands based on the content, for example, if new fruits are added. Any help in resolving this would ...

htmlcss

Utilize Bootstrap to display 8 columns side by side on Desktop screens, while on mobile, only display 3 columns

To display logos in 8 columns using Bootstrap 5, I implemented the following code: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f1d10100b0c0b0d1e0f3f4a514e514c">[email p ...

htmlcssbootstrap-5

Tips for customizing the default style of input type=“file” in reactjs?

I'm in the process of creating a field for users to select and upload their files. So far, I've developed a basic code snippet for file selection: export const UploadFile = () => { return ( <input type="file" id="fileUpload" onCha ...

cssreactjsinputtailwind-css

What is preventing the assignment of a class attribute inline using JavaScript?

<html> <head> <style> .tagging { border: 1px solid black; width: 20px; height: 30px; } </style> <script> window.onload = function() { var div = document.getE ...

javascriptcss