I would like to have the exact same responsive functionality that Omega provides, but make the whole thing align flush to the left. In addition, I would like to lock the left sidebar (sidebar first) so that only content scrolls.

I tried the following, but the content flows over the sidebar:

#zone-content {
	position: absolute;
	left: 0;
}
#region-sidebar-first {
	position: fixed;
	top: 0;
	left: 0;
}

And doing this makes the footer snap to the top of the layout.

Comments

tinarey’s picture

tinarey commented

Hey there,

for left align try (if you're using 12 columns):

.container-12 {
    margin: 0; //overwrite margin-left:auto and margin-right:auto
}

And for the fixed sidebar:

#zone-content {
    position: relative;    //creates a "wrapper" within to position absolute and fixed elements    
    padding-left: [x];    //specific width obviously depends on media so this belongs in media-specific stylesheets
    width: [ media-specific-width - x];
}

#region-sidebar-first {
    left: 0;
    position: fixed;
}

Oh and if you need the responsive functionality I assume you want it to be mobile ready? So you'll want not to fix the sidebar for mobile devices; at least iPhone can't do position: fixed.

finedesign’s picture

finedesign commented

Thank you Tina. At first I felt this still didn't meet my needs, but after a bit of work, I like it better. Originally I wanted the #zone-content to also snap to the left after the first sidebar, but I like how it centers the body content. It's a little odd, though, how it calculates the #zone-content width. And .container-12 never seemed to work...it would just stack the zone-content on top of the sidebar. Currently I'm using:

global css: Nothing
narrow css:

#region-sidebar-first {
    left: 0;
    position: fixed;
    height: 100%;
    width: 30%;
}

#zone-content {
    padding-left: 10px;
    width: 200px;
}

And normal and wide stylesheets get progressively wider.

I set the sidebar to 100% because I can't seem to get the equal heights library to work and I need to style the border of the sidebar.

And I don't want the layout fixed for mobile layouts, so the fact that iPhones (etc.) don't heed position:fixed is great by me.

–paul

finedesign’s picture

finedesign commented

This is the site, btw.
http://janlevinart.com/
(Haven't checked in IE pre-8.)

The biggest outstanding issue is getting dhtml menu to stay open in the gallery, but it's coming along.

marcoka’s picture

marcoka commented
Status: Active » Fixed

left align seems to be fixed as i see the layout
to have the menu stay open i would suggest jstree or dynatree. both treemenu scripts. i wrote drupal integrations. see my profile for the module pages.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.