CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
snorri
snorri

Reputation: 65

Multicol elements behaving differently between Chrome and Firefox

A weird multicolumn problem is keeping me from getting a layout to look the way I want it. I'm trying to get elements in a container to align in columns.

<div class="container">
  <div class="element">lorem</div>
  <div class="element">ipsum</div>
</div>

Here is a JSfiddle that shows what I mean: https://jsfiddle.net/2sobjo12/3/

If you open this fiddle in Chrome or Opera, you will see the two elements stacked on top of each other. In Firefox or IE/Edge however, they are horizontally aligned (which is the way I intended it).

Does anyone know what is causing this behavior? And, more importantly, what can I do to fix it?

--- EDIT ---

To clarify, let me explain what I'm trying to do. The container in question is a mega menu, the elements are submenus in said container. Thus, I want the browser to distribute the submenus evenly in the container, even though they can vary significantly in height. Compare this fiddle in Chrome and Firefox to see what I mean:

https://jsfiddle.net/2sobjo12/15/

Firefox does a nice job, while Chrome insists on placing the second element under the first one for some reason, and leaves the fourth column completely empty.

Upvotes: 0

Views: 57

Answers (1)

Nirjhar Vermani
Nirjhar Vermani

Reputation: 1245

In your css, add float:left. float property specifies whether or not an element should float.It can be used to wrap text around images.

li {
  background: white;
  display: inline-block;
  width: 100%;
  margin: 0 0 5px 0;
  float:left;
}

Complete css as requested

.container {
background: green;
width:100%;
float:left;
padding: 15px 15px 10px;
}

.container .element {
  background: white;
  display: inline-block; 
  margin: 0 10px 5px 0;
  float: left;
  width:25%

}

Upvotes: 1

Related Questions