Fluid grid layout jQuery

Question

Im using http://phase-change.org/jquery.gridlayout to achieve the fluid layout of several divs in my layout.

I need to keep a div on the right which contains my main menu the rest its just the content divs.

I cant figure out how to maintain the menu on the right without floating it or making the grid elements respected the menu and rearrange due to its width, they simply overlap.

My code is the following:

HTML:

<div id="menu">
</div>

<div id="content">



<div class="block">
<p>1</p>
</div>

<div class="block">
<p>2</p>
<p>2</p>
</div>

<div class="block">
<p>3</p>
<p>3</p>
<p>3</p>
<p>3</p>
</div>

<div class="block">
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
</div>

<div class="block">
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
</div>

<div class="block">
<p>6</p>
<p>6</p>
<p>6</p>
<p>6</p>
</div>

</div>

CSS:

#content.hasLayout {

position:relative;
margin-left:30px;

}

#block {

width:214px;
background-color:#CF0;
margin:30px 0 10px 0;

}

 #menu {
width:180px;
height:700px;
background-color:#669;
float:right;


 }

My JavaScript between the < head > and < /head >:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="JQuery_Plug_ins/jquery.gridlayout.js"></script>

<script type="text/javascript">    

$(document).ready(function(){


 $('#content').addClass('hasLayout').gridLayout('div.block' , { col_widht:250, min_cols: 3 } );
        });
</script>

I'm not very knowledgeable on java scripting and I really dont know even were to start looking how to implement it in that way.

Thank you.

Answer 1

If you're not knowledgeable with Javascript, you probably shouldn't use Javascript to style your site. Read the original CSS fluid grid tutorial to learn how to lay out a fluid grid without Javascript and jQuery.

Answer 2

First, Paul deserves my thanks for his small but none the less important edit, which got me thinking, he simply changed one of the tags from jQuery to CSS.

After giving some thought to this question i realized a few things:

1. The jQuery plugin is adjusting according to the window size

2. Fluid layouts are not cake! :p

3. I had before made a left margin so that the divs would have a margin to the left.

I gone back to my css and defined in:

#content.hasLayout {

position:relative;
margin-left:30px;
**margin-right:180px;**   <------- Added this
}

Now my fluid divs behave and dont allow the menu to overlap not because the menu is "phisically" aprocahing them but rather the edge of the browser window is.

I do not think of this as the best solution but it works.