960 Grid with html5 header-tag

Question

I am a newbie to 960.gs and experience some problems with it and html5.

I am trying the following: An image should span 2 grid units and in the same line a div should span 5 units then (because that "line" is full) a line break should follow and a heading should be displayed. I tried it the following way:

<div class="container_12">
    <header class="grid_12">
        <img src="nothing" class="grid_2 alpha"><div class="grid_5 suffix_5">SOMETHING</div>
        <h1 class="grid_2 omega">title</h1>
    </header>
</div>

In my understanding of 960.gs this should create the desired effect. It actually doesn't: It displays the image on one line and the div and the heading under each other and a little indented on the next line. Is this because of the usage of other elements than div's?

Thanks for your help in advance! (I got plenty of information from http://www.webdesignerdepot.com/2010/03/fight-div-itis-and-class-itis-with-the-960-grid-system/)

Could it be that the header needs to be the container instead of the grid? — rodrigo-silveira, Feb 01 '13 at 23:16
Wouldn't then the header be the container of my whole page? There is still content after the closing header-tag (but before the closing div tag of course), sorry I omitted that. — phikes, Feb 01 '13 at 23:18
The point is that you can't nest grids. Header needs to be a container. Its okay to have header's siblings be containers also. Multiple containers per page is no big deal. Every grid needs to be a child of a container, not of other grids. Make sense? — rodrigo-silveira, Feb 01 '13 at 23:46
That does indeed make sense, but it still doesn't archieve what I want: Now I have the image to the left and on the right side my div and underneath that div the heading (but still on the same line as the image). — phikes, Feb 01 '13 at 23:52
Well actually 960.gs should be able to handle nested grids (I read that on the web in many places). — phikes, Feb 01 '13 at 23:54
I basically think that the image's "float: left" is a problem. It seems to push the next "line" of the grid next to it. An enforced "float: none;" does break the whole thing. — phikes, Feb 02 '13 at 00:11
Well the clear-div seems to be necessary... That way it works (h1 has appropriate alpha/omega then), but is not nice regarding the semantics. Any other approaches? — phikes, Feb 02 '13 at 00:15

Evgeniy · Accepted Answer · 2013-03-13T16:59:24.267

1

<div class="container_12">
<header>
    <div class="grid_9">
        <div class="grid_2 alpha">
            <img src="http://showbuzz.ru/wp-content/uploads/2009/09/dead_earners_9_wenn1642245.jpg" class="grid_2 alpha" />  
        </div>
         <div class="grid_7 omega">
           SOMETHING
         </div>
         <div class="grid_9 alpha omega">
             <h1>title</h1>  
         </div>
    </div>
  </header>

http://jsfiddle.net/TMAk7/

Does it works for you?

edited Mar 13 '13 at 16:59

answered Mar 13 '13 at 06:08

Evgeniy

2,915
3
21
35

This is unfortunetaly what I don't want. I want the text "title" to be under the picture :-/. – phikes Mar 13 '13 at 13:50
Yep, exactly. And that works only with clear-div. I tried mixins with less and that works for all cases except that clear-div. – phikes Mar 13 '13 at 14:12

960 Grid with html5 header-tag

1 Answers1