Home/ Questions/Q 9120701
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T05:40:59+00:00

The code below is from W3CSchool example: <!DOCTYPE html> <html> <body> <div id=container style=width:500px>

  • 0

The code below is from W3CSchool example:

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:20%;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:80%;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</div>

</div>

</body>
</html>

You can copy the code and paste it to the editor below:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs

I have already specified the width of “menu” to 20% and “content” to 80%, why at the right side of “content” has a blank area?

It will only align properly if I add “float:left” in the css style of “content”. I can’t understand why it behave like that. Anyone can explain?

Thanks for help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is because the width of the container for menu and content is set to 500px.

    Set it to 100% if you want it to take the whole page:

    <div id="container" style="width:100%">

    Also if you want the content to simply take all the remaining space, don’t assign it a width:

    <div id="content" style="background-color:#EEEEEE; height:200px">Content goes here</div>

    Here’s the full working code:

    <!DOCTYPE html>
<html>
<body>

<div id="container" style="width:100%">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:20%;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</div>

</div>

</body>
</html>
    • 0