I’m creating a new website with 1024 width framework. I need 100% width top

Question

0

Asked: June 13, 20262026-06-13T08:09:29+00:00 2026-06-13T08:09:29+00:00

I’m creating a new website with 1024 width framework. I need 100% width top

0

I’m creating a new website with 1024 width framework. I need 100% width top header, header, menu and 100% width of footer. But I need 1024 px width content placeholder. I’m trying to set 100% height content. Say, if the content placeholder has less content, the footer need to stick to the bottom of the page, and if the content placeholder has more content the entire page need to be scrolled. here is the code sample:

<div style="width: 100%; height: 30px; background: #dddedf url('Images/top-header-bg.png') repeat-x top left;position: relative;">
<div style="width: 1024px; margin: 0 auto;">
        <div style="padding: 0 10px;">
                <!--Top Header Section-->
        </div>
    </div>
</div>

<div style="width: 100%; height: 100px; background: #fff url('Images/header-bg.png') no-repeat center center;
    position: relative;">
    <div style="width: 1024px; margin: 0 auto;">
        <div style="padding: 0 10px;">
                <!--Header Section-->
        </div>
    </div>
</div>

<div style="width: 100%; height: 30px; background: #0D9B8C url('Images/menu-bg.png') repeat-x top left;
    position: fixed;">
    <div style="width: 1024px; margin: 0 auto;">
        <div style="padding: 0 10px;">
            <div style="width: 100%; height: 30px;">
                    <!--Menu Section-->
            </div>
        </div>
    </div>
</div>

<div style="width: 100%; position: fixed; top: 160px; height: 100%; margin-bottom: -40px;">
    <div style="width: 1024px; margin: 0 auto; background: #fff url('Images/body-bg.png') repeat-x fixed top left;
        height: 100%;">
        <div style="padding: 0 10px;">
<!--Main Content Section-->
        </div>
    </div>
</div>

<div style="width: 100%; height: 40px; background: #dddedf url('Images/footer-bg.png') repeat-x bottom left;
    position: fixed; bottom: 0;">
    <div style="width: 1024px; margin: 0 auto;">
        <div style="padding: 0 10px;">
               <!--Footer Section-->
        </div>
    </div>
</div>

I need to set the main content placeholder absolute position because of the jquery scroll menu. If i set relative position, the text inside the main content placeholder gets wrapped while accessing the menu. For more details about this problem, please refer to this question.

Here is a demo and this is the jsfiddle for the same. Did I do something wrong? Solutions and suggestions are most welcome.

Thanks in advance.