Guide to Fluid Width

Author Message
S Dawkins

Posted: 4/29/2009
Quote message 

Does anyone have a guide on which areas to change to make a template fluid? Say at 95%.

Since Artisteer doesn't offer fluid width, this would be a big help!!

Posted: 5/2/2009
Quote message

Posted: 5/4/2009
Quote message 

I put together some steps for doing this... then I realized I was still using 2.0. As we speak, I'm downloading the new 2.1 update, and will go back over my steps to check for consistency.

In the meantime, here's what I put together. Maybe it will help, and maybe it won't. In 2.0, this works no matter what type of template you're making (joomla, drupal, etc).

1. Export your design as HTML into a folder.

2. Open up the template's CSS in a text editor

3. Class ".Sheet" - change width property to a % (75%, 85%, etc.)

4. Class "div.Header" - change width to 100% (this fills the header to the full width of the sheet)

5. Class "div.Header-jpeg" - change width to 100%.
- Optional: you can also set the "background-repeat" to "repeat-x" to have a tiled header image.

6. Class ".logo", set width to 100%

7. Class ".nav", set width to 100%

8. Class ".nav .l, .nav .r div", change "background-repeat" to "repeat-x"

9. Class ".contentLayout", change width to 100%

10. Class ".Footer", change width to 100%

11. Class ".Footer .Footer-background", change width to 100%
- Optional: change "background-repeat" to "repeat-x"

12. Class ".contentLayout .sidebar1", change width to 20%

13. Class ".contentLayout .sidebar2", change width to 20%

14. Class ".contentLayout .content", change width to 60%

***Note: The ".contentLayout" classes can be set to whatever width values you want. Just keep in mind that the values must equal 100% to fill the sheet. You could do 75% for "content", 10% for "sidebar1", and 15% for "sidebar2"... 75% + 10% + 15% = 100%


Posted: 5/4/2009
Quote message 

Correction to #1 - Export your template design into a folder... not as HTML (unless you're working with it as HTML, in which case, do so.)

My apologies, I wasn't very clear.

Posted: 5/4/2009
Quote message 

Ok, just tried it with version and there's only a couple of adjustments to the steps:

* Another stylesheet has been added for IE7, so don't forget to modify that one as well.

* Eliminate Step 7, as it's not required.

* There's a new class added, "content.Layout .content-wide"... not entirely sure what impact this has, or why it's there in the first place (seems a bit redundant). I modified the width setting for this to the same value as ".contentLayout .content", and the page works just fine.

Again, I hope these steps work for you as well as they have worked for me... and let's keep on those Dev's to get this feature added to the program! :-)

Posted: 5/4/2009
Quote message 

Close but no cigar.

There was no .logo in my css file, the 2nd side bar moved all of it's controls down to the bottom and the header and footer were out of sync too. However, I haven't touched a web page since css was introduced and most of what I did before that was backend stuff in ColdFusion so I would think it wouldn't be too hard to clean things up...

Thanks for the hints.
S Dawkins

Posted: 5/5/2009
Quote message 

Big THANKS to Cordain!

I had tried over and over and could never get things right, going to give it a shot shortly!!

Posted: 5/8/2009
Quote message 

Cordain, the "content.Layout .content-wide" setting appears to be for when a user wants to remove sidebars from the layout in the CMS. For instance, in Wordpress, a page template could be created with the same php code as the standard page only with <div class="content-wide"> as opposed to <div class="content">. That along with removing the sidebar divs would entail a page with no sidebars.

As an example, my site has only a single sidebar at whereas the rest of the site uses the 2 sidebars.

It comes in very handy that the developers decided to throw this one in along with the content-sidebar1 and content-sidebar2 elements as the users don't have to figure the math of the new widths.

Sho nuff,
S Dawkins

Posted: 5/9/2009
Quote message 

I've been trying this out for about 2 days now trying to make header only no avail

Posted: 5/21/2009
Quote message 

Works great, but still header and footer images don't fit (I'm using rounded corners)

Posted: 9/15/2009
Quote message 

Quote BeAvEr:

From what I can tell, it's using the static width of 719px as defined in .contentLayout .content. These embedded pages are single column (no sidebars), and I want the content to take up the whole width of the sheet.

Go to template CSS, search for those classes and "719px" and replace with "100%" (or try 95% to have some whitespace) - it should expand to the width of it's parent container. Depending on whether you are using rounded corners and shadows, this may not work for you. YMMV

Posted: 9/21/2009
Quote message 

How do I do this for height instead of width?

Posted: 4/18/2010
Quote message 

Quote Wadra:

Works great, but still header and footer images don't fit (I'm using rounded corners)

Same problem with the round corners for me..

Posted: 11/25/2010
Quote message 

HI All

I am looking through my CSS sheet but i cant find any of these lines can any on give me the line number?


Posted: 11/26/2010
Quote message 

The latest version does offer Fluid width so no need to edit it.

Posted: 12/1/2010
Quote message 

And you can download it from page:

Posted: 6/7/2012
Quote message 

Ok and how to mix static and fluid width for modules...

Lets see:

Header 1000px
navigation (user3) 100%
Banner1 100%
Top1. top2. top3 all tohether 1000px

...and so on?

I was trying to do so... and some of it even works... (not all)
...but the static ones are alogned to left - and I can't center it (how to?)