div Width is being ignored

Question

I'm trying to add a series of buttons inside some divs programmatically.

Here is the code:

Why is the width: 110px being ignored?

Please post your html and possibly a live example of the problem — Andrew Li, Sep 01 '16 at 00:50
You likely have another style that is overwriting the width for the div. This could be a more specific selector (like an ID selector), or is the same selector higher in the hierarchy, or an inline style. Can you post any other HTML or CSS you have? — Steve, Sep 01 '16 at 00:57
My friend, we really need to see some code. Images of pages don't help. Maybe use codepen.io?? Or just insert some html here. The only reason a div would not take width is that it is displayed `inline`, or your selector isn't correct, or it's being overwritten by a more specific selector. We need html and css to see... — user1775718, Sep 01 '16 at 01:00
Your JS files are local. You must add all the code related to a healthy solution. You can use http://jsbin.com etc. — Mert S. Kaplan, Sep 01 '16 at 01:14
Thanks, I made the change. The code seems good on a 1920 screen, but when I reduce the size appear the problem. — Camilo A Carrillo N, Sep 01 '16 at 02:11

score 1 · Accepted Answer · answered Sep 01 '16 at 02:26

1

The button has a width of 110px but is placed in a div that only has a width of 8.3333%. This comes from the .s1 class. Removing the class shows each button with a 110px width as desired.

.row .col.s1 {
    /* width: 8.3333333333%; */
    margin-left: auto;
    left: auto;
    right: auto;
}

answered Sep 01 '16 at 02:26

depiction

772
6
16

Hey, The container It's not aligned to center, you know how to fix it?http://jsbin.com/gogofidola/1/edit?html,css,js,output – Camilo A Carrillo N Sep 01 '16 at 03:08
Add display: inline-block to div.row. Then if you need a background color add it to the container. – depiction Sep 01 '16 at 03:39

score 0 · Answer 2 · answered Sep 01 '16 at 02:26

The stylesheet included materialize.min.css has a class .col.s1 that has a width of 8.3333...%. You will need to override this in your css

div.col.x {
    width: 110px !important;
}

I usually don't like using !important unless necessary but without more of your code to look at, this could do it.

div Width is being ignored

2 Answers2

Linked