I have markup that looks something like this:

<body>
    <div id="Content">...</div>
    <div id="Navigation">...</div>
</body>

My CSS for the #Content div looks something like this:

#Content {
    margin: 0 auto 0 auto;
    width: 75%;
    max-width: 100em;
    min-width: 35em;
}

Is there any way to position the #Navigation div relative to the #Content div, using the structure shown? I want the #Navigation div to be overlapping the right-hand side of the #Content div.

The alternative would be to wrap both divs in a third div, and position the navigation relative to that... But I'm wondering if I can eliminate the wrapper.

<body>
    <div id="ContentNavWrapper">
        <div id="Content">...</div>
        <div id="Navigation">...</div>
    </div>
</body>

#ContentNavWrapper{
    margin: 100px auto 0 auto;
    width: 75%;
    max-width: 100em;
    min-width: 35em;
    position:relative;
}

#Content {
    /* Position and size now set by the wrapper */
}

/* Positioned somewhat below the start of the content, overlapping the right side of the Content div */
#Navigation {
    position:absolute;
    top: 5em;
    right: -5em;
}
  • In your last bit of code, did you mean #Content #Navigation? Darryl Hein about 7 years ago
  • No, I meant #ContentNavWrapper. Editing... AaronSieb about 7 years ago

2 answers

1
point

If you include the #navigation within your #content you can do it.

#Content {
margin:0 auto;
width:75%;
}

#Navigation {
margin-right:-5em; /* the width of the navigation item*/
width: 5em;
float:right;
position:relative; /* needed for IE 6 */
}
Answered about 7 years ago by Divya Manian
  • Updated answer to make the code correct. Divya Manian about 7 years ago
  • That would work as well, and has advantages over the wrapper (word wrapping would be more correct), but I'd prefer to not have #Navigation under #Content from a semantic perspective. AaronSieb about 7 years ago
  • Isn't this the opposite of what Aaron is asking? The question specifically asks about positioning #Navigation relative to #Content without have #Navigation within #Content. Darryl Hein about 7 years ago
0
points

I noticed, two typos

<div id="#Content">...</div>
<div id="#Navigation">...</div>

1) You have to remove # from id names. 2) @ Divya Manian #content should be #Content. 'C' should be capital. same as #navigation 'N'

BTB, @ Divya Manian you code not working as intended.

Answered about 7 years ago by rajakvk
  • Thanks. Question updated. AaronSieb about 7 years ago