0

Basically I just need something like github's header and footer. The header and footer have different colors than the body and they both go on forever.

My center(main) div is fixed width, so that means I need to have a container div.

What I have is something like this: http://jsfiddle.net/Q2gS4/

I would like to align the header, footer and container, but if the container was the only one with fixed width, it is hard to align it without being consistent.

What I thought of doing was to create a background for the header and the main body then separate the footer but it looks like a dirty hack and feels like it's not semantic.

Is this structure semantic enough? (this is what github does)

 container
   header
   main-content
 footer

or should I stick with my original plan of 

 container
   header
   main-content
   footer

EDIT I see that stackoverflow actually also uses the github style where with the footer separate from the container with the header and main-content. is this the general way of doing layouts like this?(please provide some articles/links that support this)

corroded
  • 21,406
  • 19
  • 83
  • 132

2 Answers2

0

Not following exactly what you need the container for. The HTML and BODY elements make adequate containers the majority of the time.

Just have your header and footer 100% wide and your main-content fixed-width with auto-horizontal-margins to center it.

Lee Kowalkowski
  • 11,591
  • 3
  • 40
  • 46
  • problem is that the header and footer should also be "fixed width" per se...in the sense that it should align both ways to the content. the only thing stretchable from them is their background image – corroded Mar 28 '11 at 08:08
  • @corroded: I see what you're trying to do. Looks like your header & footer themselves may need their own inner-containers to do it like that. Although the header's background could be a tiled background on the HTML or BODY instead, but keeping things semantic I would give the background to the header. – Lee Kowalkowski Mar 28 '11 at 21:36
  • yes but i tried settign the width into pixels and it failed. it only works on percentage? – corroded Mar 29 '11 at 03:49
  • updated the question btw. if you can provide an answer and a link that supports it then im good – corroded Mar 29 '11 at 05:36
  • @corroded: Only works on percentage?! I just changed from percentage to pixels (http://jsfiddle.net/WctZ4/1/) with no problem. _How_ did it fail? Perhaps you set it too wide to see the effect. – Lee Kowalkowski Mar 29 '11 at 08:59
  • ah yeah i set it too wide lol but that solution is "much" dirtier now as i have to put container divs IN the headers and footers. they're extra markup that are there only for layout prposes – corroded Mar 29 '11 at 09:16
  • @corroded: Well, that's how it's done unfortunately. StackOverflow cheats a little by having a pre-container element with the 100% background and then a negative margin - but that's worse semantically as far as I can fathom, unless that container is reserved for some functionality I've not yet encountered. – Lee Kowalkowski Mar 29 '11 at 15:33
  • crap...do you know of any link/article that shows the same layout? it still goes against my will and i just want a hard proof/re-assurance that its okay to do that(forgive me for being so OC) – corroded Mar 29 '11 at 15:37
  • ... Unless you want something _simple_ you could do it in fewer elements then: http://jsfiddle.net/WctZ4/6/ – Lee Kowalkowski Mar 29 '11 at 15:40
  • why does the background color stretch even if you set the width to 75%? but yeah this is what i wanted. thanks man – corroded Mar 29 '11 at 15:54
  • follow up question...will this work if the main-div has a background image? – corroded Mar 29 '11 at 16:27
  • @corroded: The background color stectches because they are just really fat borders on the body element, the header and footer elements just have negative margins to overlap the fat borders. If the main-content div had a background image, it would not stretch 100%, but you could give the body element a background image if that's what you wanted. – Lee Kowalkowski Mar 29 '11 at 19:17
  • i see i see thanks man. so basically the header and footer had borders not backgrounds? so if i needed background images for both it wont work? – corroded Mar 29 '11 at 19:19
  • @corroded: Not cross browser, in CSS3 you can have multiple backgrounds on elements or use border images, but for browsers that don't support those properties, you can use flat colours and those browsers will render the images once support is rolled out (on all browsers? give it a few years!) – Lee Kowalkowski Mar 29 '11 at 19:30
0

As it stands, using <div>s, the container div doesn't change the semantics at all, so either structure would be fine.

If the page was modified to use the HTML5 <header> and <footer> elements, and the container element was changed to be, say, <article> then whether the footer was inside or outside the container would change the semantics, and you'd have to decide whether the footer was the footer of the article or the footer of the page.

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • im not a fan of actually using extra divs just for layout purposes and i think that a container with the header and main content(without the footer) is not "semantic" since im just skirting around the limitation given by it. am i mistaken here? – corroded Mar 28 '11 at 08:09
  • 1
    @corroded - You're not mistaken. The divs aren't conveying any semantics at all. I agree that extra divs for layout aren't ideal, but they are often necessary because css still has substantial weaknesses. If browsers implemented the [CSS3 Generated and Replaced Content Module](http://www.w3.org/TR/css3-content/) then many such wrappers would become unnecessary, but there seems to be little activity in that area. – Alohci Mar 28 '11 at 08:19
  • i see i see, then ill just have to deal with using those container divs like githubs. are there really no other "beautiful" solution to that problem? I'd think it was a pretty common problem – corroded Mar 28 '11 at 08:34
  • updated my question btw, if you can answer and provide a link that supports this im okay with your answer :) – corroded Mar 29 '11 at 05:35