percentage width in css not working

Question

I was using a way to define my width property in css with the viewport measurement, 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 width: 100vw; to width: 100%; my code ain't working anymore. I want to change to percentage measurement since I discovered 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;
}

`left:100%;` is outside your screen, use `right:0;` instead. — Nick, Feb 17 '15 at 10:04
I changed it but it will break my jQuery script. So I guess I did it on purpose. Still the problem isn't there. The problem started when I changed the width of the content id from 100vw to 100%. I didn't change anything else in my code. I just can't figure out why it is wrong when i change from viewport to percentage — Kevin Ammerlaan, Feb 17 '15 at 10:10

score 7 · Accepted Answer · edited Dec 31 '15 at 09:39

7

Make the positions relative 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 :)

edited Dec 31 '15 at 09:39

S.L. Barth is on codidact.com

8,198
71
51
66

answered Feb 17 '15 at 10:08

m0bi5

8,900
7
33
44

So far you are my hero! Can u explain me why this will make the difference? – Kevin Ammerlaan Feb 17 '15 at 10:12
@KevinAmmerlaan glad I could help , I will try my best to tell you the difference in brief Elements with absolute positioning are placed relative to the first parent with relative or absolute positioning. It all depends on what items contain the absolute positioned item. – m0bi5 Feb 17 '15 at 10:20
Another difference is that absolute positioned elements are removed from the normal document flow and relative positioned items are not. So if you have three
s on TOP of each other and you set the middle one to absolute positioning, the top and bottom
s will collapse together.
– m0bi5 Feb 17 '15 at 10:21
@KevinAmmerlaan mark this as answer if i helped :) , you would be doing a favour – m0bi5 Feb 17 '15 at 10:21
@KevinAmmerlaan also a great article at : http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ – m0bi5 Feb 17 '15 at 10:23
Thanks a lot, I have also fixed many of other bugs now and transformed my website in minutes! – Kevin Ammerlaan Feb 17 '15 at 10:27
1

@KevinAmmerlaan squat one bug , they all run away xD – m0bi5 Feb 17 '15 at 10:30

percentage width in css not working

1 Answers1