Does CSS height depend on width?

Question

I have a textarea and I want it to be in the left of the screen, but with a small margin. So I thought I'd set height:98%; and width:48%; and then margin:1% 1% 1% 1%;. But, the height is more then 98% (it is off the screen), and in this is the same in all major browsers (chrome, opera, firefox, IE, and safari, all latest versions). However, opening the debugging console in chrome changes the textarea's height, even though it (the debugging console) only affects the width of the screen. Why is this, and how can I fix this? Here is my code:

<html>
  <head>
    <title>Why oh why</title>
    <style>
      body { margin:0px;padding:0px; }
      #fullscreen
        {
        position:fixed;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        background:rgba(168,168,168,1);
        }
    #input
      {
      resize:none;
      width:48%;
      height:98%;
      margin:1% 1% 1% 1%;
      float:left;
      border:0px;
      padding:0px;
      }
    </style>
  </head>
  <body>
    <div id="fullscreen">
      <textarea id="input" rows="10" cols="50"></textarea>
    </div>
  </body>
</html>

you have a 1% margin around it. reduce the 98% to say 96% and then try it — Rachel Gallen
– Rachel Gallen, Commented Jun 21, 2014 at 8:50
Yes it solves it. Thanks! But whty 96%? A margin of 1% on both sides makes 96+1+1=98% right? But it should add up to 100%, because that's the full height of the screen. Where is my mistake? — user3546284
– user3546284, Commented Jun 21, 2014 at 8:57
Padding on what? I set the padding to 0px on body and the textarea... — user3546284
– user3546284, Commented Jun 21, 2014 at 9:02
just within the browser screen i mean i dunno it fixed it for me i tweaked my code for ages to get it right and my colleague and I couldn't understand why it didn't add up right either. At least it works! — Rachel Gallen
– Rachel Gallen, Commented Jun 21, 2014 at 9:07
well vertical margin or padding in % takes parent's width as reference, so when you say margin:1%; on a screen of 1200px wide, it gives a margin of 120px , no matter wich height is the window. — G-Cyrillus
– G-Cyrillus, Commented Jun 21, 2014 at 9:20

G-Cyrillus · Accepted Answer · 2014-06-21 09:32:13Z

1

vertical margin or padding in % takes parent's width as reference, so when you say margin:1%; on a screen of 1200px wide, it gives a margin of 120px , no matter wich height is the window

See explanation, reminder on WC3 :http://www.w3.org/TR/CSS2/box.html#margin-properties

Here a codepen to play with and see what vertical-padding in percentage involves in the layout :)

edited Jun 21, 2014 at 9:32

answered Jun 21, 2014 at 9:23

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

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

5 Comments

user3546284 Over a year ago

Ah so it does depend on the width. But this doesn't explain why 96% works... :/

G-Cyrillus Over a year ago

yes it does, omdat the 1% margin is less than your 2% height :), resize your window's width to find out :) shrink it to see that it is not enough anymore or expand really a lot that to see it is too much

user3546284 Over a year ago

wait... so 96% is the exact value I should give the height? resizing the window still changes the height...

G-Cyrillus Over a year ago

no, you need to find another way for this. you may use vh units codepen.io/anon/pen/wnLep

G-Cyrillus Over a year ago

@vrugtehagel you may as well drop the float and use the inline-block properties codepen.io/anon/pen/ezvkf

Collectives™ on Stack Overflow

Does CSS height depend on width?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related