CODEWITHSUNDEEP
htmlcss
Camilo A Carrillo N
Camilo A Carrillo N

Reputation: 5

div Width is being ignored

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

Here is the code:

Why is the width: 110px being ignored?

Upvotes: 0

Views: 2727

Answers (3)

Paul Smart
Paul Smart

Reputation: 1

This is near the top of the Google results for questions about div width, so I'm going to put this here.

It's important to remember children of the div will not always respect the container size.

For instance, if you do something like...

<div style="width: 50px;">
<span style="display: inline-block; width:50px; background-color: blue">a</span>
<span style="display:inline-block; width:100px; background-color: red">b</span>
</div>

You'll plainly see that the second span still has a width of 100px, stretching beyond the 50px div.

Images come with a "built in" width, so they will easily do the same sort of thing if you don't override it in some way.

If you've got something like...

<div style="width: 50px;">
    <img src = "images/wideboi.png"/>
</div>

...and wideboi.png is a 1000px wide then it's going to show up as 1000px, despite the tiny div you tried to put it in.

In the case of images, you can control this by setting the width to some percentage of the container size.

<div style="width: 50px;">
    <img src = "images/wideboi.png" style = "width:100%"/>
</div>

Then your image scale to the width of your div, instead of making it appear as if your div were ignoring its width value.

In this case, where you change the width of the image and do nothing with the height, it will scale height in such a way as to keep it's original aspect.

Upvotes: 0

David Kago
David Kago

Reputation: 326

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.

Upvotes: 0

depiction
depiction

Reputation: 819

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;
}

Upvotes: 1

Related Questions