ansaurus

Question

Answer 1

A:

If you are willing to use jQuery, you can pretty easily calculate the offset of the main body and adjust the width/padding/margin of the sidebar accordingly.

Simple example

http://dl.dropbox.com/u/1588084/floatmenu.htm

Corey Downie 2010-07-29 21:16:17

Two problems. It doesn't center the content area and the menu area into a centered position. The other is that the content area slips under the menu at smaller sizes. I tried it out here. http://dl.dropbox.com/u/23132/New%20Folder/index2.html

Picard102 2010-07-30 02:48:17

This is the same technique but I've changed it to be closer to your mockup, I think. Keeps the menu and content centered, no slide-under.http://dl.dropbox.com/u/1588084/floatmenu_2.htm

Corey Downie 2010-07-30 14:31:26

Still doesn't work quite right. The menu and the sidebar are to be in a fixed position and when I try to do that with your version it falls apart. The menu and the fluid part are also going to have content in it that changes so they need to be the same height dynamicly.

Picard102 2010-07-30 18:55:50

Answer 2

+1 A:

Got a solution from Bordingo.

<html>
<head>
<style type="text/css">
html, body {    height: 100%;    min-width: 960px;}

.container { width: 960px; height: 100%; margin: 0 auto; background: #ddd; }

.nav-fix { position: absolute; left: 0; width: 50%; min-width: 480px;  height: 100%;}

.nav { position: absolute; top: 100px; right: 280px; width: 9999px; height: 200px; background: #333; }

.nav-box { position: absolute; top: 10px; right: 10px; width: 180px; height: 180px; background: #eee; }

</style>
</head>
<body>
<div class="nav-fix">
<div class="nav">
<div class="nav-box"></div>
</div>
</div>
<div class="container"></div>
</body>
</html>

Picard102 2010-07-31 22:15:23

No luck with the dynamic height of the nav area though ?

Corey Downie 2010-08-03 13:14:43

They dynamic height seems to work, the height is just in the example to hold the shape without adding content for the demo.

Picard102 2010-08-03 15:57:44

ansaurus

tags:

views:

answers:

Floating Menu Variable Width.

related questions