I hope I put this question as it should, I am not an expert in html/css/javascript, so forgive me if it's not very clear.

The issue is as follows. I made my first website last week for the birth of my son (still not arrived :)). I intend to put some pictures on it, as well as some tips for a sustainable future. In addition, I would like to add a Disqus.com forum on it. I like Disqus, I use it on my blog and aggregates different discussions across the web. Very useful web-app. I put the code they provided me with on the site, and the forum is shown, but when opened using the left-menu, so inside the container, it is rendered inside a scrollable area. If you open it as a separate page, there is no scrollbar (that's as I would like it), but no padding on the left (does the CSS not work for javascript?).

Maybe a stupid question, but I have never made a website before, so.. I am kind of stupid :)

I hope someone can answer my question. The link to the website is shown below and the menu item you should click is called "Leg een ei" (Lay an egg).



First - congratulations on your son, I have my first 5-month-old myself and it's a wonderful (but busy and tired) time of my life.

The issue with what you've got there is that you site is using <frame>, which is quite inflexible, and frankly outdated - even though you've actually done a very good job of getting them to look good!

Your main <frame> has a fixed height of 800px, which is why it's not expanding, but I don't think I've ever seen a frames site auto-expand the way you're intending.

There are two solutions to your situation, both involve dumping the <frame> option:

  1. Use <table> based layout. CSS fanatics and strict XHTML people will have just had a heart attack with what I just said, but frankly it's the quickest and easiest way to get the layout that you want, and I'm guessing that you won't be doing a huge amount of traffic (friends and family only?) so nobody is going to mind, or even know.

    A table with two columns should suffice - the first row will have two columns (left and right), and the bottom row will have a colspan=2 to make the footer row. Throw in a <valign=top> and that will ensure that the content keeps its current look and feel.

  2. A <div> based layout. This is what the CSS and XHTML people will prefer to you use, and the layout will look the same as both a <table> and <frames> based layout but the fundamental way it's been designed is quite different. You'll need to use <div> tag and the float CSS property to get it to work. The people over at doctype.com should be able to help you with that.

Now, both of these solutions involve re-embedding your header and your footer onto every page. On a small site like this, I wouldn't be too concerned but if you start growing it to > 3 pages then it could become a nightmare to maintain. This is where some server-side coding comes into play.

What you would need is really very, very, very simple though, so don't go freaking out. If you were doing this in say, PHP, all you would need to do is say:

<?php include('navigation.html') ?>

Wherever you want the navigation to appear, have a file called navigation.html and it will then copy that file wherever that code is placed. So you place that code where you want the nav to appear in your pages, and hey presto :)

I hope that's given you some food for thought, let us know if you have any other queries.

P.S. I love your little artwork on the page, it brought a swell to my heart. Ahh the joys of parenthood

  • hi there! thanks for your comment! I am looking at it, but don't know yet which direction I take. I am still learning, so I actually want to do it the beautiful way, which seems to be php. I might look into that option, and turn the site into a php site. I cannot yet vote for your answer (not enough reputation points), but thanks for your elaborate advice. I hope others vote for you. – Thieme Hennis Oct 27 '10 at 9:00

I kind of solved my own problem. The problem is that the autoHeight JQuery calculates the iframe but cannot look at other domains. "Cross-domain autoHeight js" brings enough results in Google, but not many easy answers.

I now solved it (sort of) by adding a div between the part:

<div style="min-height:800px !important; overflow:auto !important; height:100% !important; width:auto !important; margin:5px !important; font-size:inherit !important"> 

Now it renders well, does not autoexpand, but that is not a problem (it shows a scrollbar when the page is becoming longer than 800px.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.