CODEWITHSUNDEEP
htmlcsswidth
Trung Tran
Trung Tran

Reputation: 13721

html - css width applied to div not working

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>

Upvotes: 0

Views: 53

Answers (4)

Okku
Okku

Reputation: 7819

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%);

Upvotes: 1

blurfus
blurfus

Reputation: 14031

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>

Upvotes: 0

Ivan Frolov
Ivan Frolov

Reputation: 103

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

Upvotes: 0

EternalMonologue
EternalMonologue

Reputation: 41

You need to put 200px instead of just 200.

Upvotes: 0

Related Questions