Now, something most dollers find themselves using at some point or another are IFRAMES. These are pages inside of pages, and very popular because you only have to put your layout on one page. I myself am not fond of them because I have better ways to only need to put my layout in one page (which I might expound upon later!), but they're not very hard to use, that is, after you know how :) So I will teach you what you need to know!
Let's make a div with a new id, how about <div id="content"></div>?. Put it inside </div> </div> for your links and wrapper. Inside this content-div, insert <iframe src="http://www.snowy-day.net/main.html" name="main" id="main"></iframe> (I don't mind you direct linking this file. It's kinda cute :) ) This is the basic code for an iframe. src="" should have what file you want to show up by default in your frame, name/id is how you refer to them in links/css.
Code | Output
That's worse than it was! But at least we have our frame :) The next part will fix the worst problem and is very easy! Make a #content{} in your css, and add inside it float:right;. Find your #links{} (you made one right?) and add float: left;
Code | Output
There, now they're living in harmony together. But gosh, that frame is awful puny. And not to mention it has that border around it, *and* in Internet Explorer, it's not even transparent! Let's fix those last two issues first. In your iframe code, after "id=main", type in allowtransparency="true" frameborder="0". This will actually make the W3C not validate your webpage's code, because allowtransparency is a Microsoft-only trick, but you have to make sacrifices sometimes. Luckily we don't need it for firefox or opera anyway! Your iframe should look like this now: <iframe src="http://www.snowy-day.net/main.html" name="main" id="main" allowtransparency="true" frameborder="0"></iframe>
The change in transparency/borders is something kinda easy to visualize, so let's keep going and get that size problem fixed! Open up your favorite paint program that displays what pixel you're on (or you can get the Measureit extension for Firefox) and roughly determine how wide you need your iframe to be, starting measuring from the right hand side (because it's floating to the right, right?) Also measure it from the top to how high it should be. Mine looks like it should be about 422px tall and 500px wide. Add width: ###px; height: ###px; inside your #content{} (replacing the ### with your measurements) and watch how it blossoms! Actually it won't blossom much. You have to set the size on the iframe itself also :)
Since we named our iframe, we can manipulate it like a div. make a #main{} in your CSS, and add height: 100%;. You could add width: 100%; but then your scroll arrow would block the edge of our layout! (well in this case. It really depends on what kind of images you're using etc etc etc, this whole website stuff is VERY subjective) Anyways, subtract about 10 or 15 pixels from your #content{} width measurement and set that to #main{ height: 100%; width: ###px;}.
Code | Output
Hey, that looks like a proper website now! Really you could conceivably stop here, but all your links would open normally in your browser window and not in your iframe, so change your links to look like <a href="URL" target="main">TEXT</a> if you want them to open in your iframe. Don't do this to links to another site; that's very bad nettiquette! Those people need all the room they can to display their site, just like you do! It's more polite to use target="new" so that those outside (external) sites open in a new window.
If you wanted, you could also connive a way to put your copyright notice on every page. That's your homework, I guess! :) Here's my finished product. You can right click to "View Source" for this one :)
IFRAME Usage Notes You will need to specify "background:none;" in any pages you use in your iframe if you want them to be transparent in Internet Explorer. You don't have to make a big stylesheet for this, just use <body style="background:none;">. You also need to specify all your colors and stuff on all those pages as well. Linking external stylesheets like I mentioned on the first page makes this a lot easier :)
Didn't quite make it with me all the way? Either go Back or E-mail me and tell me to be more clear!