CODEWITHSUNDEEP
cssfirefoxhtmlcss-float
Dakkadakka
Dakkadakka

Reputation: 51

Floating div behaving odd in Firefox

I've tried searching all over but I'm not sure how to solve this issue. I made a div for shopping cart items, and used the float property so the items will fill the screen for tablets, widescreens and phones.

.displaybox { 
margin-left: auto;
  width:150px;
  height:140px;
  padding:10px;
  font-family:arial; 
  font-size: 10pt; 
  float: left;
  margin: 5px 5px 5px 5px;
}

It works fine every way I want to use it except Firefox. In Firefox, the items are stacked vertically on top of each other, forming a vertical column of items. What is a way I can accommodate Firefox browsers for this?

Upvotes: 0

Views: 1466

Answers (2)

Dakkadakka
Dakkadakka

Reputation: 51

The comments here were correct. The problem was not in the CSS, but in the surrounding div and table element. While other browsers were stretching as needed for the item boxes, it was too small, and it was retaining that width in Firefox. Specifying the surrounding table element to 100% width makes Firefox behave like all the other browsers.

Upvotes: 0

Mamadum
Mamadum

Reputation: 540

I don't see anything wrong with the given class. Your problem would be the wrapping element.

Upvotes: 1

Related Questions