CODEWITHSUNDEEP
csshtml960.gs
phikes
phikes

Reputation: 620

960 Grid with html5 header-tag

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/)

Upvotes: 1

Views: 1095

Answers (1)

Evgeniy
Evgeniy

Reputation: 2921

<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?

Upvotes: 1

Related Questions