Percentage width in css not working

I used a way to define my width property in css with a viewport dimension, css code:

#content { position: absolute; background-color: white; width: 100vw; top: 115px; bottom: 30px; display: table; z-index: 0; } 

When I changed the width from the width: 100vw; to width: 100%; my code no longer works. I want to change the percentage measurement since I found that the viewport will not work on Android <4.4

Other related HTML and css code:

HTML

  <div id="mainslide"> <section id="aanbod"> <div id="content" align="center"> <table class="tablestyleorchideeaanbod"> <tr> <td class="titel" width="85%">Orchidee</td> <td class="beschrijving" width="15%" rowspan="1" align="right">21 aug</td> </tr> <tr> <td class="soort">Cherry red</td> <td width="15%" rowspan="2" align="right"><svg height="30" width="30"> <circle cx="15" cy="15" r="12" fill="#ff4641" /> </svg></td> </tr> <tr> <td class="beschrijving"><span class="width">Aantal: 100 stuks</span>Grootte: 3 Liter</td> </tr> </table> </div> </section> <section> .............. </section> <section> .............. </section> </div> 

CSS

 #mainslide { position: absolute; left: 100%; z-index: 1; } #aanbod { position: absolute; left: 0px; } .tablestyleorchideeaanbod { width: 100%; padding: 12px; padding-left: 8%; padding-right: 8%; border-bottom-width: 1px; border-top-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-color: #8cca49; } 
+5
source share
1 answer

Make relative positions instead of absolute , then width:100% should work

 #mainslide { position: relative; left:100% z-index: 1; } #aanbod { position: relative; left: 0px; } .tablestyleorchideeaanbod { width: 100%; padding: 12px; padding-left: 8%; padding-right: 8%; border-bottom-width: 1px; border-top-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-color: #8cca49; } #content { position: absolute; background-color: white; width: 100%; top: 115px; bottom: 30px; display: table; z-index: 0; } 

Working example: http://jsfiddle.net/duvx5qLp/

Let me know if you are looking for something else :)

+3
source

Source: https://habr.com/ru/post/1213524/


All Articles