Yes, there's a way to do it. I'd rather not go into the details of applying it to your own comic, but I'll give you the theory.
First, the Devil's Cake comic isn't centred at all, it just sits a fixed distance from the left. Not what you want, from the sound of it.
If I'm understanding you right, you want the layout centred as if the menu wasn't there, but have the menu protrude, right? I figure if you wanted the menu to be taken account into centring, you wouldn't ask...
The way I do it is give the layout a container that's as wide as the layout you have so far plus
twice the size of the menu, and split it into three Divs: menu, content, empty right side. In other words, a structure like this:
- Code: Select all
<div id="wrap">
<div id="colwrap">
<div id="left">
{MENU}
</div>
<div id="main">
most of your current layout would go in here
</div>
<div id="right">
Emptiness.
</div>
</div>
</div>
To get these inner divs to align horizontally, you'd need to float them as you would in any three-column layout. CSS code:
- Code: Select all
#wrap {
width:1020px; //right + main + left widths
margin:0 auto; //makes the layout butt against the top of the page (and bottom, if long enough), centres it horizontally
}
#colwrap {
position: relative;
}
#left {
float: left;
width: 160px; //width of the menu container, whatever you want. Make sure the right container's width also matches.
text-align: center; //optional, depends on how you format your menu
}
#right {
float: left;
width: 160px; //same width as the left
text-align: center; // this line and
overflow:hidden; //this line aren't really needed, useful if you want to put something in the right column
}
#main {
float: left;
width: 700px; //width of your main section, whatever you already have
position: relative;
}
The problem with this is that the empty column still counts towards the total width of the layout, so when viewed in a smaller window, people will be able to scroll into the empty space.
If you want to see how this works in practice... well, one of my layouts is structured that way, but I ended up putting advertising and a chatbox in the empty column. Still, if you pretend they're not there (or hide them with Firebug or something), you can see how it works:
http://blackdram.smackjeeves.com/You can also try looking at the HTML and CSS I have for that site to see how it's done in practice. I highly recommend using something like Firebug or at least the DOM Inspector (both are Firefox plugins) when analyzing other sites' structure and CSS.
Busy, busy.
