0

First, I wonder if anyone can even say that question title ten times fast.

This should be pretty easy. I've been googling around, and while there are a lot of tutorials on it, I'm having trouble grasping the idea overall. I've even looked at some other SO questions that seem related but I've not been able to make them work.

I have 3 layers. header, menu, body. The real application is much more complicated, of course. But for the sake of this question this is sufficient enough data.

The entire page itself fills 100% width, but the content within each section will be fixed to 1024px wide. This was easily done with the reknown margin: 0 auto; style. So that wasn't an issue.

Here is the trick. The middle layer, the menu. I want the menu to overlap the border between the header and the content. Now then, doing this was also not too hard. I just absolutely position the menu and kick it down by 100px to get it to the right vertical alignment.

What I cannot seem to achieve is the horizontal alignment of the 1024px block. I've included a light fiddle and an image of the expected output (beware, jsfiddle's default preview pane is not 1024px wide, so it looks like it is working at first glance)

Update

Following the instructions at this post I was able to make it work. But it is only functioning in Chrome.

http://jsfiddle.net/dE8xE/

Desired Output (colors exaggerated for emphasis and distinction)

Desired Output

Community
  • 1
  • 1
Ciel
  • 17,312
  • 21
  • 104
  • 199
  • Why don't you just use something like `margin: 0 80px;`? http://jsfiddle.net/dE8xE/1/ Your content areas seems to be of fixed width. – Jared Farrish Sep 18 '11 at 20:37

2 Answers2

0

Can you use percentage margins and width to achieve the effect you're going for? Setting the z-index to something greater than those of the other sections will get it to float over them. Example: http://jsfiddle.net/6xCfU/

margin: 10% 0 0 10%;
width: 80%;
z-index; 100;
tvanfosson
  • 524,688
  • 99
  • 697
  • 795
  • Relative margin/padding never works as intended in conjunction with an absolute width/height, and vice versa. Compare a TV screen with an iPad: 10% of the first isn't even getting close to 10% of the second. – Rob W Sep 18 '11 at 20:46
  • Yeah, this is a good idea, but as Rob points out it won't scale very well. – Ciel Sep 18 '11 at 20:49
  • @Rob - You could use it with a min-width. – tvanfosson Sep 18 '11 at 23:28
0
#site-menu {
    background-color: #fff;
    height: 64px;
    position: absolute;
    top: 100px;
    display: block;
    width: 1024px;

/* everything is easy when you have fixed width */

    left: 50%;
    margin-left: -512px;
}
Ashnur
  • 366
  • 3
  • 20