html - css width applied to div not working

Question

I have a div with class widget and I applied width and length styling to my widget class, but for some reason, the width is still 100% of the screen instead of 200px like I defined below. Can someone help?

Here's a fiddle:

https://jsfiddle.net/ps17t1a5/

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}


.widget {

    display: table-cell;
    text-align: center;
    vertical-align: middle;
    margin: 0;
    width: 500px;
    height: 200px;
    padding: 7px;

}

    <body ng-controller="main_controller">
        <div class="widget">
            <h1>{[city]}, {[state]}</h1>
            <div>
                <h1 style="float: left">{[current_temp | degree]}</h1> <h1 style="float: right">afasf</h1>
            </div>
            <p>{[today_day]}</p>
            <p>{[today_high | degree]} / {[today_low | degree]}</p>
        </div>
    </body>

A snippet or a fiddle would help to see the problem in action. .widget is a common class, and may be used by a plugin, which overwrites the rule. — Okku
– Okku, Commented May 18, 2016 at 21:50
Try removing display:table from the html, body selector. — Michael Hommé
– Michael Hommé, Commented May 18, 2016 at 21:53
i tried that but it didnt work; i added a fiddle here jsfiddle.net/ps17t1a5 @mikehomme — Trung Tran
– Trung Tran, Commented May 18, 2016 at 21:57
if you remove display: table from the body, the width attribute is honoured. I am off to try to find out why that is the case (see updated fiddle jsfiddle.net/ps17t1a5/2) — blurfus
– blurfus, Commented May 18, 2016 at 22:15

Okku · Accepted Answer · 2016-05-18 22:33:59Z

1

Cells inside a table should add up to 100% of the table dimensions. You've set your table to be the body element with width: 100% and height: 100% - your .widget is the only cell and thus makes use of the entire space as a consequence. Simply remove the display: table and display:table-cell rules, and the dimension rules will work fine:

https://jsfiddle.net/ilpo/ps17t1a5/3/

I don't know why you'd want to use display:table-cell in the first place, but I presume it's for vertical and horizontal centering. Should that be the case, use this instead:

position: absolute; //or relative or fixed depending on your needs
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

edited May 18, 2016 at 22:33

answered May 18, 2016 at 21:45

Okku

7,8744 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Trung Tran Over a year ago

Sorry - that was a bad copy and paste. My code already has the 'px' units

EternalMonologue · Accepted Answer · 2016-05-18 21:46:43Z

0

You need to put 200px instead of just 200.

answered May 18, 2016 at 21:46

EternalMonologue

411 silver badge8 bronze badges

1 Comment

Trung Tran Over a year ago

Sorry - that was a bad copy and paste. My code already has the 'px' units

Ivan Frolov · Accepted Answer · 2016-05-18 21:46:45Z

0

Height and width defined incorrectly, they should be 500px and 200px

answered May 18, 2016 at 21:46

Ivan Frolov

1036 bronze badges

1 Comment

Trung Tran Over a year ago

Sorry - that was a bad copy and paste. My code already has the 'px' units

blurfus · Accepted Answer · 2016-05-18 22:32:29Z

Removing the display: table from the body makes the width attribute be honoured by the rendered element.

Reading the docs, it states that this makes the div behave like a table element.

In this case, it looks like the table would contain only one cell and, since the same body element has an attribute of width:100% this makes the widget element to have a full width of the cell (hence the full width of the table, hence the full width of the page)

Does that make sense?

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  /*display: table;*/
}
.widget {
  /* added to show box boundaries */
  border: 1px solid green;  
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  margin: 0;
  width: 310px;
  height: 160px;
  padding: 7px;
}

<body ng-controller="main_controller">
  <div class="widget">
    <h1>juno, alaska</h1>
    <div>
      <h1 style="float: left">10</h1> 
      <h1 style="float: right">cool</h1>
    </div>
    <p>today</p>
    <p>69/ 88</p>
  </div>
</body>

Collectives™ on Stack Overflow

html - css width applied to div not working

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related