Fluid Layout [#397242]

I have tried modifying the theme to fit the width of the browser with some success. I love the theme but would like to know if there is an easy way to change it to a fluid theme. I am using a 3 column layout and would like the center to expand and contract with the size of the browser. I know a little about css but am no expert. If it will mess up the theme too much is it possible to easily change the width of the theme via css without breaking the theme?

Comments

Comment #1

green monkey commented 21 March 2009 at 21:18

I'm trying to figure this out as well.

I'm looking over the "Waffles" theme, its a version of Marina, and it's fluid. So, I'm thinking the clue starts there :-)

Comment #2

obeahman commented 30 March 2009 at 12:27

I too would like to see it as a fluid theme

Comment #3

luckysmack commented 31 March 2009 at 02:16

yes, i love the theme but to me the center column is too narrow. even if it was wider that would be awesome. I looked through the css files and found a way to at least widen the theme. I made the following changes:

In the section:

/* Layout
-------------------------------------------------------------- */

I changed the following block:

#page {
  margin: 0 auto;                                 /* center page */
  position: relative;
  width: 1280px;

i changed the width to 1280 from 920. THis will widen the overall theme, but not each section. for that go to the section labeled:

/****************************************/
/*          COLUMN LAYOUTS              */
/*                                      */
/* Classes for different column layouts */
/* that are applied to the <body> tag.  */
/****************************************/

you will see various sections for the different layouts. single column, 2 colums (sidebar left), 2 columns (sidebar right), 3 colums, and so on. Depending on which style you are using (in my case 3 column) there is an element called "body.layout-first-main-last #content-wrapper". this will control the width of all the center content areas. i changed mine to 780

body.layout-first-main-last #content-wrapper {
  margin: 0 20px 0 0;
  position: relative;
  width: 780px;
  z-index: 1;

Now, the last thing to keep in mind, is after this if you go to the blocks page, the 3 bottom content areas, postscript 1,2, and 3 are smaller proportianately than they were before. to make them larger, just below that in the section:

/* Postscript regions
-------------------------------------------------------------- */

change the element "#postscript-wrapper {". change the width to whatever your overall themes width was. In my case 1280. And the section below that

/* Postscript regions
 * first | middle | last
-------------------------------------------------------------- */

the 1 and 2 column settings should be fine, but with a 3 column layout, make the width 31% of your total width. So in my case 1280 * .31 = 396.8. Or just 367. This is the same proportions that the original theme used. if you want to try and make it a different width then go ahead and try. that number just cant be over 33% or more of the original theme or the regions will start stacking.

Also keep in mind this is for my screen. I have a widescreen laptop, 17". Resolution 1440x900 and it looks good. I havent noticed any real bad changed with this change, and seems to be a quick fix (doesnt shrink as well as a flexible theme obviously). But fot the time being you can see what the theme will for for the given width. Hopefully someone can get it to a flexible width, im not that knowledgeable on css to change the theme that much.

Hope you enjoy.