Home/ Questions/Q 6387501
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T03:09:35+00:00

Please take a look at this page: http://uploads.dennismadsen.com/fullwidth.html <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0

  • 0

Please take a look at this page:
http://uploads.dennismadsen.com/fullwidth.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="da-DK">
<head>
    <title></title>
</head>
<body style="background-color:#e0e0e0;color:#fff;">

  <div style="position:absolute;width:100%;">
      <div style="background-color:#000;">
        <div style="width:800px;margin:0px auto;text-align:right;">Container width a width of 1500px</div>
      </div>
  </div>
</body>
</html>

The inner div has a width of 800px and should be horizontal centered if the window is bigger than 800px. Try to see the page in a browser window smaller than 800 px. For instance with a width around 500px. Than the black background is not having full width when you scroll right. Why?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    <div style="background-color:#000;"> is inside <div style="position:absolute;width:100%;">, which width equals the width of the screen. So, <div style="background-color:#000;"> width also equals the width of the screen. As right this div sets the black background, the background width also equals width of the screen, not more. So it does not extend to the right.

    UPDATE

    You can use just two divs:

    <div style="background-color:#000;">
    <div style="width:800px;margin:0px auto;text-align:right;">Container width a width of 1500px</div>
</div>

    Sorry, does not work either. Leaving it here as a non-working sample for reference.

    UPDATE 2

    And now the working variant:

    <div style="background-color:#000;min-width:800px;width:100%">
  <div style="width:800px;margin:0px auto;text-align:right;">Container width a width of 800px</div>
</div>
    • 0