X-Cart forums

[Mike SSI]

I'm using the light and lucid template (i.e. 2-columns with left menu bar). I want to modify this design so that the header and footer have a 100% width while the content area has an exact width and is centered.

Anyone know what css code needs to be modified to make this happen?

[Toora Designs]

if you want to make header and footer width 100% you will have to play with many file, I would suggest using firebug and webmaster mode you can accomplish what you are trying to do.

[Mike SSI]

I can make the header and footer 100%. That's actually easy. Just need to take out the width factor in #page-container located in the altskin.css file.

#page-container {
border: 0 none;
margin: 0 auto;
text-align: left;
/* width: 960px; */
float: none;
}

But doing this makes the content (the stuff in between the header and footer) 100% also. Seems like it would be easy to just give the in between stuff a width factor of 960px. But because these templates use floats, relative position, and bizarre padding, I can't come up with the right combination.

[Toora Designs]

can you PM me your store link? or you can just post it here

[Mike SSI]

Can't do that. Top secret. But thanks anyway.

[cherie]

I usually turn off the floats and absolute positioning and remove some of the extra divs, then your main container can be centered using margin:0 auto with a width.

[Mike SSI]

Yep. That's the route I'm going. But haven't found the lucky combination of id/class in which to disable floats and what not. I was hoping someone could tell me which specific class/id to focus on.

[cherie]

Playing with the demo with Firebug here are the changes I made:

#page-container {
    width: auto;
}
#content-container {
    float: none;
    width: 960px;
    margin: 0 auto;
}

It's hard to tell about margins and such with the demo header in place but this should point you in the right direction. Firebug will help you track down which changes to make.

[Mike SSI]

Cherie,
Thank you. Those css modifications appear to be exactly what I needed.