Home/ Questions/Q 5975393
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T21:04:44+00:00

The simplified content of my html page is: <body> <div id=container> <div class=header></div> <div

  • 0

The simplified content of my html page is:

<body>
    <div id="container">
        <div class="header"></div>                  
        <div class="main-content" style="float:none; align:center; text-align:center; margin:auto;">
            <table style="width: 2000px;">
                <tr>
                    <td>Some Content</td>
                </tr>
            </table>            
        </div>      
        <div class="footer">            
            <a href="#">EMS</a>
            </div>
    </div>
</body>

The .css:

html,
body {
 height: 100%;
 margin: 0px;
 padding: 0px;
}
body {
 font-family: "Liberation Sans",'Lucida Grande',Verdana,Arial,Helvetica, "Luxi Sans", "Bitstream Vera Sans", Tahoma,Sans-Serif;
 font-size: 90%;
 background: #FAFAFA;
 color: #333333; 
}
#container {
 background:#AEC7DB url('../main-bg-gradient.png') repeat-x top left;
 position: relative;
 min-height: 100%;
 width: 100%;
 height: 100%;
 margin: 0px;
 padding: 0px; 
 max-width: 100%; 
}
.main-content {
 position: relative;
 padding: 0px;
}
.footer {
 clear:both;
 font-family: Georgia,"Times New Roman",Times,serif;
 font-size: 90%;
 padding: 4px 0px 4px 0px;
 text-align: center;
}

As you can see I have added a table width 2000px. As because I will add there table dynamically. And this causes the deformation to the page. The div with id “container” is not covering its content. It is taking the size of my screen and rest of the portion in the left is white also there is a horizontal scrollbar as this is natural with 2000px table.

What I need is that the div with id “container” cover its whole content and the the div with id “header” remain fixed in its position if one scroll the page horizontally.

How can I achieve this?

Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The first solution is to change the width of #container from 100% to 2000px and remove max-width.

    Demo: http://jsfiddle.net/h3TQ3/

    A second solution is to remove max-width and width from #container and change position:relative to position:absolute

    Demo: http://jsfiddle.net/h3TQ3/1/

    To have your header in fixed position you can add the following css:

    .header {
    position: fixed;
    top: 0;
    width: 100%;
}
    • 0