Question

I’m wondering whether it is at all possible to anchor a menu above the outermost div on a layout?
Here is a jsFiddle I’ve set up: http://jsfiddle.net/L2Deq/7/

and here’s the code too:

HTML—

<div id="menu">Menu 1</div>
<div id="testing">Testing 1</div>

<div id="menu-right">Menu 2</div>

<div id="boxed">
<div id="box-01" class="boxes"></div>
<div id="box-02" class="boxes"></div>
<div id="box-03" class="boxes"></div>
<div id="box-04" class="boxes"></div>
<div id="box-05" class="boxes"></div>
<div id="box-06" class="boxes"></div>
<div id="box-07" class="boxes"></div>
<div id="box-08" class="boxes"></div>
</div>

​CSS—

#menu {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    left: 20px;
    top: 10px;
    position: absolute;
}

#menu-right {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    width: 100px;
    left: 128px;
    top: 10px;
    position: absolute;
}

#testing {
    font-family: Georgia, Arial, sans-serif;
    font-size: 14px;
    left: 20px;
    top: 30px;
    position: absolute;
}

.boxes {
    background-color: red;
    height: 100px;
    width: 100px;
    margin-right: 8px;
    margin-bottom: 8px;
    display: block;
    float: left;
}

#boxed {
    position: absolute;
    left: 20px;
    margin-right: 12px;
    top: 64px;
    width: auto;
    float: left;
    z-index: 9998;
}

Basically I’m looking to anchor ‘Menu 2’ in line with the outermost red box. So, when the screen size is reduced the menu moves in 100px (width of the red boxes) so it is always in line with the box on the right. Hopefully that makes sense, I can’t seem to figure out how to achieve this, not sure if I can be achieved with css or maybe it will require jQuery?

Answer 1

I wrapped a container around the outside, setting a max-width, changed your layout to be relative instead of absolute and employed css Float attributes to properly position everything. I’m pretty sure this is not exactly what you want (the menu doesn’t move by 100px chunks but rather moves fluidly), but here’s the fiddle and the CSS changes:

http://jsfiddle.net/L2Deq/21/

#container {
    max-width: 900px;
}

#menu {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    margin-left: 20px;
    margin-top: 10px;
    position: relative;
}

#menu-right {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    margin-left: 10px;
    margin-top: -60px;
    position: relative;
    float: right;
    margin-right: 25px;
}

.clear {
    clear: both;
}

#testing {
    font-family: Georgia, Arial, sans-serif;
    font-size: 14px;
    margin-left: 20px;
    margin-top: 10px;
    position: relative;
}

.boxes {
    background-color: red;
    height: 100px;
    width: 100px;
    margin-right: 8px;
    margin-bottom: 8px;
    display: block;
    float: left;
}

#boxed {
    position: absolute;
    left: 20px;
    margin-right: 12px;
    top: 64px;
    width: auto;
    float: left;
    z-index: 9998;
}