locked
Missing right side on a div 100% width

    Question

  • Anyone knows why a div with a css class with attribute width : 100% is missing the right side ? See image ! Blank app (Universal Apps)



    • Edited by GearWorld Sunday, January 4, 2015 7:28 PM
    Sunday, January 4, 2015 7:26 PM

Answers

  • I think the issue might be related with the HTML CSS layout, see the following image I captured from Visual Studio.

    As we see the width 100% is applied to the div, therefore the div width is 1366 in simulator.

    And we have Border which is not calculated in the width, for this reason, there is no space for right side to display the border.

    simply to make it work, I set div width as 1366 - 3*2 = 1360 (screen width - left border width - right border width), the border display without any problem.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Monday, January 5, 2015 7:17 AM
    Moderator

All replies

  • I got the same result in IE 11 on Windows 8.1 update
    Sunday, January 4, 2015 7:29 PM
  • Yes,  I can reproduce the issue:

        <div style="background: red; border-style: solid; width: 100%; height: 300px;"></div>

    I will further look into it or consult our senior engineers why there is no right side.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, January 5, 2015 7:07 AM
    Moderator
  • I think the issue might be related with the HTML CSS layout, see the following image I captured from Visual Studio.

    As we see the width 100% is applied to the div, therefore the div width is 1366 in simulator.

    And we have Border which is not calculated in the width, for this reason, there is no space for right side to display the border.

    simply to make it work, I set div width as 1366 - 3*2 = 1360 (screen width - left border width - right border width), the border display without any problem.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Monday, January 5, 2015 7:17 AM
    Moderator