Hi all!
I need layout with two fixed-width sidebars and fluid content. Anyone have this css for Zen theme? I tried googling, but nothing founded :(

Comments

shruti.sheth’s picture

Hello,

1. Make the width of first sidebar and second sidebar width 20%

2. Make three different blocks of content for which different width is required

3. Goto admin/build/block

4. Keep the three blocks in content-top, content-bottom and content-area i.e the content region of content types

Add the following css code in your custom .css file

/*CSS for content regions and sidebars*/
#main .region-sidebar-first
#main .region-sidebar-second {
  width: 20%;
}

#content-area {
  width: 80%;
}

#content .region-content-top {
  width: 50%;
}

#content .region-content-bottom {
  width: 30%;
}

5. Give appropriate width to all the three content regions as per the requirements

hswong3i’s picture

I would like to refer my #1085480: Add optional layout-fluid.css reference to STARTERKIT? as your reference.

shruti.sheth’s picture

Hello,

The reference given as #1085480: Add optional layout-fluid.css reference to STARTERKIT? is useful to change the entire layout and to make the layout fluid for different types like
- no sidebars
- one sidebar
- two sidebars
etc

But here what is requested is to make the content fluid which can be done by making sidebars fixed and applying css to content but layout.

Thanks
Shruti

hswong3i’s picture

@shruti.sheth: How can this be done with following codes, when sidebars are define in % but it is display in fixed width?

But here what is requested is to make the content fluid which can be done by making sidebars fixed and applying css to content but layout.

1. Make the width of first sidebar and second sidebar width 20%

/*CSS for content regions and sidebars*/
#main .region-sidebar-first
#main .region-sidebar-second {
width: 20%;
}

#content-area {
width: 80%;
}

#content .region-content-top {
width: 50%;
}

#content .region-content-bottom {
width: 30%;
}

Please kindly correct me.

shruti.sheth’s picture

Hello,

My purpose is to tell the site administrator to make the sidebar width fixed by giving custom css to it
i.e. to give fixed width whatever required to sidebars and after that give the variable width to the content blocks as required.
So the content can vary in width but the sidebar width remains same throughout.

Thanks
Shruti.

johnalbin’s picture

Status: Active » Closed (fixed)