Home/ Questions/Q 8024075
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T22:45:22+00:00

I’m new to CSS and am designing my first site from scratch using CSS

  • 0

I’m new to CSS and am designing my first site from scratch using CSS (I’ve recently graduated from the for the love of God stop using html to style your websites way of life).

I want to create a page where the header and footer extends beyond the width of the body copy and goes complete from left to right of the page. I’ve started the code but I’m stuck. The header will have a logo and the navigation (I haven’t coded the navigation yet but that’s not too hard) and the footer will simply have one line of content.

I looked up examples in other questions and the answers are all really complicated and involve things like scroll bars and that’s way more than what I want.

Any suggestions on how to do this would be greatly appreciated! Sorry if this is a stupid question. Thanks.

HTML

<body>

<!-- begin wrapper -->
<div id="wrapper">

<!-- begin header -->
  <div id="header">
    <p>Content</p>
  </div>

<!-- begin navigation -->
  <div id="navigation">
    <ol>
    <li>Home</li>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Contact</li>
    </ol>
  </div>

<!-- begin content -->
  <div id="content">
    <h1>Heading</h1>
    <p>Content</p>
  </div>

<!-- begin footer -->
  <div id="footer">
    <p>Content</p>
  </div>

</div>

</body>

CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);

#header {
    background: #636769;
}

#navigation {
}

body {
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 16pt;
    background: url(../images/texture.png);
}

#wrapper {
    width: 938px;
    margin: 0 auto;
    padding: 20px 20px;
    background: white;
}

#footer {
   background: #636769;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want #header and #footer to span the entire page, you will also have to move them out of #wrapper. You may want to specify height too, e.g. height: 40px.

    Do you want the header and footer to stay in place while scrolling? If so, use position: fixed; on both. Then, on #header put top: 0px; left: 0px; right: 0px;; and on #footer put bottom: 0px; left: 0px; right: 0px;.

    Anything else that you want to do, let me know. I’d be glad to help.

    • 0