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?
- No, I meant #ContentNavWrapper. Editing...
2 answers
Divya Manian
815
1
point
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 */
}
- Updated answer to make the code correct.
- 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.
- 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.
rajakvk
0
0
points
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.
- Thanks. Question updated.
