Separator Not Occupying 100% In HTML5

Separator is not occupying 100% area of the container. There should not be any space on the rightand left to the separator between date and played numbers. Any solution for this pl

Solution 1:

The parent containers padding is set to 5% so the child element can only expand as much as the padding will allow.

To resolve this in your example I suggest you remove the left and right padding from the parent and set margins on the child elements you do not want to be 100% width.

e.g.

#container1 {
   padding-top: 5%;
   padding-bottom: 5%;
   padding-left: 0%;
   padding-right: 0%;
}

#container1 label {
    margin-left: 5%;
    margin-right: 5%;
}

DEMO: http://jsfiddle.net/wb4GU/6/

---

Another potential solution is to expand the splitter to have a width greater than 100% and then shift it across the page as necessary

#splitter {
    width:110%;
    margin-left: -5%;
}

DEMO: http://jsfiddle.net/wb4GU/5/

Solution 2:

http://jsfiddle.net/wb4GU/2/

width:110%;
margin-left: -5%;

This should work

Solution 3:

It's because the splitter is in the container div and the container has padding right and left.

Remove from #container1:

padding-left: 5%;
padding-right: 5%;

Alternatively, if you want the 'Date:' and 'Played Numbers' in the same position, change the width in #splitter to:

width: 110%;