3

I want to create a red square on in the webpage.

When I write the following html element: 

<div style="{'background': 'red', 'table-layout': 'fixed', 'width': '**10%**','height' : '**10%**'}"

I get a white webpage.

However, when I replace '%' with 'px' and write:

<div style="{'background': 'red', 'table-layout': 'fixed', 'width': '**10px**','height' : '**10px**'}"

I get a small red square at the corner of the screen. Probably, I use the percent feature wrong. Can you tell me what is the problem?

CrazySynthax
  • 13,662
  • 34
  • 99
  • 183

4 Answers4

4

<div class="parent" style="width: 100%; height: 500px">
  <div style="width: 10%; height: 10%; background: red"></div>
 </div>

i think you need to have a parent which your percentage width and height would base.

GvM
  • 1,685
  • 11
  • 13
0

When you use percent you define size of object as a percent of the parent. If the parent of your div has a small size e.g. 100px x 100px than setting up your div to 10% width and 10% height will end up with having a div in size 10px x 10px (as this is 10% of parent size).

Make sure the parent size of your div is what you want. Best way is to use Developer Tools build in into the browsers.

Baumi
  • 1,745
  • 1
  • 17
  • 31
  • so whenever I use %, do I always have to start with the element and define it to be 100%, and then define all of its offspring ? – CrazySynthax Nov 01 '16 at 07:47
  • Of course not. Parent is not always html element (in fact you should not style `html` but `body` instead). Parent is an element that contains your div. How the parent is styles and position is only up to you (e.g. it can be positioned `fixed` which will not depend on your body size, etc.). – Baumi Nov 01 '16 at 07:51
  • when I defined: "body { width: 100%; height: 100%}", it didn't work. Only when I wrote: "html. body { width: 100%; height: 100% }", I got the red square. So... I think it means that we must start with the tag. – CrazySynthax Nov 01 '16 at 08:56
0

'%' need ah position: try this

<div style="position:absolute;background: red;table-layout: fixed;width:10%;height:10%;"></div>
prasanth
  • 22,145
  • 4
  • 29
  • 53
0

If you want to use % as width and height. First you need some outher div with px.

Check this out: https://jsfiddle.net/JakubL/sjtcvwdr/

Outer div has 1920px height and 1440px width so div-test, (your red square) div will have 192px height and 144px width.

Jakub L
  • 3
  • 2
  • In theory, this may answer OP's question, but per site's rule, you need to post code here and use link as a reference or demo. Please write your code here or this post will be removed soon – Danh Nov 01 '16 at 08:06