I have a website I am creating for my little girl http://beccacooks.richardhealey.com what I would like is a layout like this

[header/
[body]
[left nav/]
[main body 100% width/]
[right nav/]
[/body]
[footer]

my curent layout is hard coded and looks fine as it is done in css. but what I really want is my main body to stretch. but keep the right and left nav stuff where there sopose to be at fixed widths. I have tried various things found on web but cant find any that truly work.

Thanks

the following link is a great article to what you are looking to do.
http://www.maxdesign.com.au/articles/css-layouts/

and here is some code for a two sided layout. I just got finished with designing that one my self.

div.box400
{
clear: left;
float: left;
width: 35%;
padding: 50px 0px;
margin: 0 0 0 14%;
display: inline;
}


div.box401
{float: right;
width: 35%;
padding:50px 0px;
margin: 0 14% 0 0;
display: inline;}

CSS

#wrapper {
	width:100%;
}
#header {
	height:120px;
	border:1em solid red;
}
#footer {
	height:120px;
	border:1em solid black;
}
#left {
	float:left;
	width:15%;
	border:1em solid blue;
	margin:0 1em 0 0;
}
#right {
	float:right;
	width:15%;
	border:1em solid grey;
	margin:0 0 1em 0;
}
#centre {
	float:none;
	width:60%;
	margin:0 auto;
	border:1em solid orange;
}

<div id="wrapper">
<div id="header"> Header Section</div>
<div id="right"> Right hand</div>
<div id="left"> Left hand</div>
<div id="centre"> Content section</div>
<div id="footer"> Footer Section </div>
</div>

USING the document float and floating elements rather than trying to fight against the natural layout.

http://www.modtalk.co.uk/_site/layou...n/with-floats/

BTW the borders are only there to show the layout.

I checked out your website and it looked cool. Your daughter will always remember you cared.

Becca is really excited about her site. She has been baking alot of stuff and trying to get pictures. My next goal on the site is to get the header image (its a background image) to rotate. We have about 4 now that we like our plan is to make a few dozen and have them match somewhat the item that is being displayed. Its alot of work and will take many years to add all of the elemnts we want to the site. We still need to add user logins and I want to play with the layout and try some of the above listed things.

Thanks all for the imput. I hate static sized sites. I have a huge 24 inch monitor and hate to see the sliver websites down the middle.

Thanks

have them match somewhat the item that is being displayed. Its alot of work

Hopefully you don't mean geting a header image to match a page is a lot of work?

'cos that would only need about 5 lines of code to make it happen.

When I say match im saying when showing say a cake recipe I want the header to show a cake, when its displaying say a pasta recipe i want to show a pasta dish. The site is all database driven with the ingredients all enterd as key words to group recipes together and in common. I need to get enough images to classify them with types of recipes and then display the closest to the type in question. Right now I have only 2-3 decent images (my picture taking skills are not as good as my programming skills) that and I have to balance this all between work and family. Each day I get either 2-3 new recipes added or 1 to 2 little features tweaked.

Originally Posted by chrishirst

http://www.modtalk.co.uk/_site/layou...n/with-floats/

I was sitting here looking at this (Its exactly what i wanted) is there a easy way to make all 3 columns end at the same level. In the quoted link the left hand and right hand are not the same height and I want them to always be same height for example some pages the left hand (where I put my menu) may be longer then the center and or right hand. some times the center is longer and then there are times that the right hand is longer. I want all 3 to display even heights. Is there a easy css trick to do that.

Even if I cant get all the same height I plan to change to something simular to that. but if all 3 can always match height thats even better.

Thanks again

is there a easy way to make all 3 columns end at the same level.

Not without javascript. The alternative would be the faux columns method, which is still the easiest way to get the effect.
http://www.alistapart.com/articles/fauxcolumns/