Position of the title in 960gs

Question

Hy. I work with 960gs (12 columns) and I try to put the title after the logo in the bottom part of it. The solution I find doesn't work too good because it place the title under logo.

HTML:
    <div id="header" >
    <div class="container_12">
      <header>
        <div class="grid_4">
            <a href="index.html" title="Pagina principala - CRCE" rel="home">
                <img src="images/CRCE_logo.png" alt="logo CRCE"/>
            </a>
        </div>
        <div id="titlePosition"class="grid_10">
            <a href="index.html" title="" rel="home">
                <img src="images/titlu_crce.png" alt=""/>
            </a>
        </div>

</header>
</div>
</div> 

CSS:
  #header{
    background: #798AF7;
    background-repeat: repeat-x;
    height: 205px;
    overflow: visible;
    border-bottom: 30px solid #37459D;
    display: block;
   }
   #titlePosition{
    position: bottom;
    }   

The logo is on 4 columns and the title on 10 columns. Also I will put the language chooser(selector) and FB logo in the right top so I think that's a challenge. I've attached an image for details too, see how I want to look at the final header

Answer 1

I don't think you can use the columns in that fashion, it should sum to 12.

Because the logo from first Column overlaps on the second. Make your logo column as just 2 cols and have your title as 10 cols.

<div class="grid-container">
 <div class="grid-2 logo-wrapper">
   <img class="logo" src="logo.jpg">
 </div>
 <div class="grid-10">
   <!-- Look how the grids can be nested further-->
   <div class="grid-container">
     <div class="grid-10 text-right"> Language selector</div>
     <div class="grid-10 text-right"> Facebook </div>
     <!-- You can use top margin -->
     <div class="top30px grid-12"> Title</div>
   </div>
 </div>
</div>

Now set the logo image to absolute position

.logo
{
 position:absolute;
 left:0;
 right:0;
}

Then for the parent around the .logo set it to relative.

.logo-wrapper
 {
  position:relative;
 }

I have given my solution considering pseudo grid system, because i haven't used 960gs - grid system.

General Idea:

You can consider that following 3 element are in different rows occupying 10 columns

1. language selector

2. Facebook icon and

3. Site Title

Tips:

• Avoid absolute position for Title as you can achieve it through nested grids as shown in the above HTML
• Use top margin to push the title further below to the required position.