Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm trying to build a website (html only) for a design studio and I am trying to figure out what is the best way to go about it.

Layour of a webpage is like this:

  • A page is divided into two spaces (think of it as a vertical column like this: L | R where L = left side and R = right side)
  • R page will have images for menu options. For simplicity, let's say we have "Home" and "Contact Us"
  • L page behaves like a state machine. For e.g., when user clicks on Contact Us: L is updated with contact us contents and clicking on Home updates the content with home contents

I'm trying to figure out what would be a good way to deal with this kind of a situation. Please let me know if you need me to be clear or provide more details.


share|improve this question
up vote 0 down vote accepted

I think you have two choices. You could use javascript to modify the contents of the left hand side when the right is clicked on, so that the page never refreshes. This is quick, but doesn't work for people who don't have javascript enabled.

Or you could just create a series of pages with the same text on the right - though you may want to highlight the "Home" or "Contact Us" text so that the user knows which page they're on.

share|improve this answer
javascript options seems appealing to me. Do you think this can be done using jquery ? Can you elaborate more on how would we do it if we were to use js ? I'm trying to find alternatives than making series of html pages, since a change/edit in navigation, implies making those changes manually in all the other html pages. – brainydexter Aug 5 '11 at 0:04
Yes, jquery would be ideal. Put all the content in a series of divs. Hide them all apart from the home page one. When you click each navigation item it shows the corresponding div and hides all the others. – paulmorriss Aug 5 '11 at 8:05

I would just make 2 divs, one for the navigation and one for the main content. since the navigation generally has the same amount of stuff in it i would make it fixed width. just basically a tiny css file defining 2 divs with absolute position, one with fixed width.

div.navigation {width: 250px; position: absolute; right: 0px;}
div.content {position: absolute; right: 250px;}

css3 has a nav tag for navigation that you could use instead of the div.navigation.

share|improve this answer
i understand the part about having 1 diff for positioning. But, I didn't understand what you meant by using the 2nd diff for navigation. Can you please elaborate on that ? – brainydexter Aug 4 '11 at 4:22
the divs are both for positioning, one positions the navigation the other the content. – xyious Aug 4 '11 at 5:23

Have a look at using a CSS Framework to simplify laying out your webpages. Some popular ones to look at are Blueprint, YUI and 960. These will make it easy for your to make the two column layout you are looking for.

If you use only html, then you have to repeat the html of the design on every page of the website. This is fine for a small website but if the site gets large, and you want to make a change to the template, then you have to edit every single page.

Most html editors (such as Dreamweaver) have a template system where you can save the layout and navigation (without content) as a template file and then use that to build all your pages. If you want to make a change, you just edit the template file and all the pages change.

A more advanced option would be to use some kind of server side include or some very basic php to join together several files that contain your template and content.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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