[David-Allan]

Hey Guys,

Need to pick your brains.

I have been creating a custom header for the ability theme on our dev site. http://dev.robertsonpackaging.com

Now I'm not great at web design stuff so the grid system is really pickling my head. Is there a tutorial on this or anything?

I've got the header looking almost the way I want it just by messing about with the code and css but I can't get it exactly as I want.

Here is what it looks like now and below that is the way I want it to look. I'm sure it's not a big task but as I said I can't get my head around this whole grid thing.

http://dev.robertsonpackaging.com/images/support/original.jpg

and the way I would like it to look

http://dev.robertsonpackaging.com/images/support/desired.jpg

Here is code I used in header_style_custom.tpl

<div class="grid_3">
{include file="custom/header/content/header_logo.tpl"}
	<div class="clearing"></div>
</div>

<div class="grid_3">
<br><h2 class="h2_header_phone_new">Sales: {$config.Company.company_phone}</h2><p>
<h2 class="h2_header_phone_new">Fax: {$config.Company.company_fax}</h2>
	<div class="clearing"></div>
</div>

<div class="grid_16 omega">
{include file="custom/header/content/header_minicart.tpl"}
<br><br><br>{include file="custom/header/content/header_dropdown.tpl"}
	<div class="clearing"></div>
</div>

<div class="clearing"></div>

and here is the custom css I put in common.css

.h2_header_phone_new  { color: #fff; font-size: 1.9em; right no-repeat; background-position: 0% 4px; text-align: left; }