Layer 4 copy

Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file


Please wait - we are now uploading and converting your file...


Wait! You can upload your PSD, but you aren't logged in! If you submit now, you won't get any of the cool Unlimited features. You'll just get plain XHTML and CSS DIVs. Create a new account to use all the great Unlimited features free for 2 weeks.

Expanding Content with Your Website

Expanding Content with Your Website

All of the previous techniques for building a page or template that expands with your content are no longer needed. Now it's as simple as naming your 'frame' layer with the _frame Layer Naming Convention and putting your content inside. Yep, that's all there is to it. Gone are the days of designing a bunch of layers, taking great care that this is inside of that and this is on top of that and editing CSS by hand afterwards.

Just design the frame - the graphics that you want your content to fit wihin. This will include what's above, below, left and right of your content. Make that one layer in your Photoshop file and name it with the _frame Layer Naming Convention. Then make another layer for your content. You can use any of the existing psd2css Online content Layer Naming Conventions (_text, _drupal, Joomla, or _wordpress). Make the content fit within the frame (that only makes sense, right?).

You can even add other psd2css Online layers inside the frame too - they will stay fixed relative to the bottom of the frame - so for example if you want some _lbthumb images or a button, or some text based links to stay in a 'footer' under your content, just draw it in under the content but within the _frame in Photoshop and it will work. Take a look at the video for an example - there is a button in the _frame that stays under the content no matter how much content there is.

When adding features within the _frame to stay under your content, you have to be sure to list the content that you want to expand above all other content in the _frame. For example, suppose you put your content_joomla layer inside a _frame, but you want to put a joomla_footer underneath it inside the same _frame - so when your content grows, your footer pushes down with it. To make it work, you have to make sure the content_joomla layer is listed above the footer_joomla layer in the Layers panel in Photoshop. Whatever _text, _joomla, _drupal or _wordpress layer is listed first in the Layers panel of Photoshop will be the one and only 'expandable' layer that will make the _frame expand. All other layers of any kind will be fixed relative to the bottom of the frame.

Here is the PSD file used in the tutorial:

Here is a link to what was generated in the tutorial for HTML/CSS (no code was written by hand!):


Hi Shaun,

I know there is a newer video that shows you how to use relative frames in order to get a footer to move down as your main content expands, but I cannot find it again. I am trying to make a page where I can just keep typing in the main content area, and it will expand down and move the footer down with it (with the footer links staying attached to the footer). Here is the page I will be working on:

I've tried to use both the frame and the relative attribute. The footer will not move down the page, and I do not want to use the sticky footer. Any help would be appreciated. Thanks!



I've been having trouble with pieces of my layout not showing up ever since I made it into an _frame layout. Basically, all of the _link layers I have on my .psd file don't appear on the final web page. I'm wondering what's wrong.

here is a list (in order) of my layers:


Limit the contents width

I am using this _frame naming convention in my psd and it works as a template on my joomla site. The website expands downwards.
But the problem is that the content text overflows on the side. Is there a possibility to limit the text to a certain width?
The footer, the part of the _frame layer that is below the content_joomla layer is not aligned with the expanding site. How do I fix this?

You can see what I mean on my website:

Tank you for the help.

Best regards Roberth

Can I Make a Frame that can Close

How do I create an expanding frame that can also allow the user to close if required. I have tried including the _close layer within the _frame layer but this does not work. Anyone else having this issue ?

What to do if i want left and

What to do if i want left and right side to expand exactly as like content? When i put content into a frame, modules from boath of sides are moved under the bottom of content.

vertcally fluid website

hey shaun, i know i must be doing something incorrectly or i am simply missing something, but i am having difficulty getting my site to perform correctly. i want the content area background to be centered, white and expand vertically with content (all between a header and a footer), but i would like the area outside the "box" of the site to be a different color (gray for example) that is if a browser is expanded, the areas to the left, right and bottom of the site could be a gray color, but the background behind the text and photos as they expand down to remain white. this problem has plagued me on a couple other sites as well. thanks shaun!

-dan childress

Did you ever solve this? or someone else?

Anyone get a site as described working?

Frame not push frame?

Hello Shaun, I'm Brazilian, I'm very interested in the machine of your site being, however there is a question that I could not resolve, tried everything in every way .. the question is how do I get a push frame another frame, all attempts to get faked so that it spread through the frame beneath another frame, is there solution for this, I realize that in drupal themes when the reader is expanded throughout the contents of other frames are pushed down. Thanks for the site = D

Doesn't Work!

I have tried doing this with my web design and it's NOT WORKING. My layers are named as follows.

empty_center (hidden)

Both the frame layers and the center layer aren't working. Is it because of my old version of Photoshop (7.0)

Content stretch not working correctly.. getting a scroller bar

how do I get it to stretch correctly, Im getting a scroll bar. and its not stretching.

Frame Feature

You should not be getting the scroll bar if you are using _frame. It will expand out as needed. Make sure to use bodybg and center as well so that as it expands the back ground will expand with it.

I hope this helps!


My wordpress theme is in shambles. It was working fine until I attempted to fix the overflow by using this technique, but to no success.
Here's my link:
And here's my PSD:

That page has enough content to cause the theme to expand, but when it does, it moves my sidebar content down along with it, leaving a large white space. I want the sidebar to stay fixed at the top, but because it is contained within the _frame, it doesn't seem to work. Also, if you click any of the other pages, which don't have enough content to make it expand, the theme is complete chaos. my _frame, sidebar, and footer push up through the header and navigation, sitting behind them. Also there are breaks in the design, etc. I know that this is a lot of stuff, but I don't understand why it isn't working. PLEASE help, this is the last thing I need to get working before I can finish converting my site! I have limited CSS experience and without this site, I'm afraid I'm doomed!

How/Where is the repeating graphic in _frame defined?

I have a header and footer image, and a plain color background for the center of the page, with the layers named and setup just like in your .psd

How do you know which parts are the header, and footer? does the _frame layer look at the content_joomla layer and extend the vertical dimensions horizontally to the bounds of the layer and create a vertical tile from that?

How to define the header and footer, as currently when it shows up, the header is chopped in half horizontally and is overlapping itself in an undesireable way. The .jpg image is fine when viewed on its own, but in the template this strage artifact is present.

Is there any way to just create a flat color inside the frame without any image?

The _frame could be made by using _frame_#ffffff and have it work within an _empty_frame which could contain the _frame_header and _frame_footer

Just a suggestion to help make it a more powerful user friendly/customizable feature.

Any help would be much appreciated.

Great work btw! You've been reading my mind for the last 10 years waiting for something like this to come around!


I tried adding frame layers but in Joomla the text is appearing in an iframe (with a scroller) rather than expanding.

_frame minimum height?

Hi Shaun,

Just found your site and finding the whole thing a revolution!! One thing I'd like to know is, is there any way of setting the frame to be a minimum length. I basically only want it to grow not to shrink.

Many thanks,



I would also like this functionality

possible answer to fixing minimum height

By no means am I a programmer, but this is working and this is how I did it...basically go into your psd2css.css file....towards the bottom for example:

/* You named this layer Frame Top 1000 */

.Layer-1000 {

position: relative;

left: 0px;

top: 0px;

width: 924px;

height: 350px;

z-index: 1000;

background-image: url(../Layer-2.png);


basically I changed the height from 20px to 350px.....then I had to change the position of content_joomla....changed the height in retrospec to the position it was in...its now -325 for height....hopefully this helps!

Wordpress Frames

Hey Shaun,

Your site is simply amazing, I'm still learning, but I'm confident once I have this town it will revolutionize the way I create websites.

I've gone ahead and created a WordPress template and I am having a couple issues. Basically, I have a PSD with a _bodybg as my bottom layer, then a _bkgnd_frame as my site design. On top of that are some _link's and _linkover's, then I have three areas which are content_wordpress and designsync_twitter and sidebar_wordpress.

I have it laid out as one big vertical rectangle to the left which is my content_wordpress and then stacked on top of each other to the right of it is _twitter then below sidebar_wordpress.

However, when I make the theme, it's going crazy! I can't get my content and twitter to line up at the top with each other and the sidebar is usually under/over the twitter area and a ways down the content_wordpress.

Got any ideas?

Thank You,


Is it possible to cascade frames?

Hi bastaaa - Not yet. At the

Hi bastaaa -

Not yet. At the moment neither embedding one _frame within another, nor putting a _frame below another and expecting the bottom one to move as the top one grows is supported. Both of those sorts of things are of course possible with some JS and CSS coding, but the psd2css Online code generated doesn't do those yet.


Ok, I just made myself a

Ok, I just made myself a liar.

You can put multiple _frames one above the other. You just need to:

1) add _relative to the _frame layer names
2) put them all in some container layer.

That's it. Check it out:

Video tutorial is uploading to youtube now...



What about a transparent expanding text area?

When I've experimented with this new feature, it always uses the actual graphic as the background of the expanding area. What if I wanted the expanding text area to be transparent so that the text would appear over the repeating background of the page? I tried using _frame_empty, but that did not work.

content_joomla Still Does Not Expand With _frame

Several people have mentioned this on different tutorials and all of their questions were ignored. The main Joomla content section does not extend to the size of its content. Putting a _frame layer immediately beneath and around a content_joomla layer does not make it expand.

Please help and address this issue. It is **important**.


You are a Genius!! Pure Genius! A true Game Changer. If you can figure out how to widgetize your wordpress themes then I will have to bake you a cake or something.... I use a theme called flex right now in wordpress and I love it cuz I can customize it to a certain degree but I am waiting for the day when psd2cssonline will create wordpress themes that can be widgetized and categories can go across the top header!!! Till then keep up the Godly work!!

Hi cailaDanielle - Well I'm

Hi cailaDanielle -

Well I'm half way there! :)
The WordPress themes created now are Widgetized. The WordPress engine recognizes a theme generated today as widgetized and you can add as many widgets to the sidebar as you would like.

Still working on the categories across the top however...



Footer in the _frame won't work

I love the _frame option, it works great for my joomla template.
But I now tried adding a joomla footer to the bottom (within the _frame) and it won't work. doesn't stay in the bottom, or doesn't upload my file.

I get the exact same problem,

I get the exact same problem, going to have to do it the relative way too work

Hi vivoo and yavi - Yep -

Hi vivoo and yahli -

Yep - there was a bug that has been fixed. You can put more than one _joomla, _drupal, _wordpress or _text layer in the frame now. But only one of them will make the frame expand - that is the one listed first in the Layers Panel in Photoshop. Give that a try now and let me know if it does what you want.



High Schools and libraries will be named after you

'_frame' is amazing! I no longer fear expanding text. Drupal and Wordpress are once again my friends. Thanks so much, Shaun.

2 objects expand

Is it possible to get the frame expand by using two text areas? I am using the content_joomla, and the left_joomla. The problem is that only 1 of those will make the content area expand. Why does only 1 make it expand but not the other?

copyright (c) 2009 psd2css Online, Inc.



User login

Become a Fan of our Facebook Page

Need help or have a question?

| Privacy | Terms of Use |

copyright (c) 2008, 2009, 2010, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content