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;
}
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 :)