Solved

CSS: 960px container

Posted on 2015-01-05
6
23 Views
Last Modified: 2016-05-11
Hello Experts,

I am curious. I am fairly new to CSS and web design. Well, fairly new to designing websites correctly... Anyway, I am taking a few courses right now from Team Treehouse. I am really enjoying their classes. In one of the lessons, I noticed the code was like this:

<body>
  <header>
  </header>
  <div id="wrapper">
    <section>
    </section>
    <footer>
    </footer>
  </div>
</body>

The associated CSS sets the wrapper to this:

#wrapper {
  max-width: 960px;
  margin: 0 auto;
  etc.
  etc.
  etc.
}

Why wouldn't the header be included within the wrapper ID?
0
Comment
Question by:extremedesign413
  • 2
6 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 334 total points
ID: 40531339
Perhaps the design is for a page where the header spans the entire width of the browser window regardless of size and the content (inside the wrapper) spans the entire width up to 960px wide. At that point it's fixed at 960px in width and is centered left to right in the browser window (margin: 0 auto). If the header were inside the wrapper, and it could be, it would also be fixed at a maximum of 960px wide. I say "perhaps" because we don't have the css for the header.
0
 

Author Comment

by:extremedesign413
ID: 40531342
@Tom Beck:

Would it be considered wrong or incorrect to include it within the ID wrapper?
0
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 334 total points
ID: 40531380
No. It depends on what you want your finished page to look like.

Realize that <header>, <section> and <footer> are specific content containers whereas <div> is a generic container. They are all block elements and are interpreted by and behave the same in any web browser with regards to normal flow layout. In your example, the <div> container is being used to wrap sections of the page together so that css can be applied to the group as a whole. It is not an essential construct to the design of a web page. Tags like <header> were created to make html markup more readable and subsequently easier to troubleshoot. Before HTML5 these containers would have all been generic <div>s.
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 166 total points
ID: 40531812
<header>, <section>, and <footer> along with a number of other tags are new for HTML5 as part of a move to a more semantic approach to markup.  what they do in the page is unpredictable if the page does not contain a valid HTML doctype.  They are also not recognized in TE versions prior to IE9 and it requires that a bit of code be added to define them for those older browser otherwise the rendering becomes unpredictable.

As for keeping the header outside of the narrower portion of the page it might be that the header includes a banner add that controls the width from its own styles or script.

However what you have posted is just an out of context fragment.  Without the full page and the requirements it is impossible to tell if the CSS is going to produce the desired page layout and rendering.

Cd&
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Google maps isn't showing even after API has been entered 12 78
push text up below h2 tag 1 33
CSS Font Arial Narrow 1 26
Put shading on half of picture 8 21
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now