I need your help to solve a little html page layout issue I'm having. 
I recently redesigned my website to use a left-side nav bar.  The nav
bar is 160 pixels wide.  I'd like all the "content" of each page to
appear between the 180th pixel and the right side of the browser
window.  I also want the browser to wrap text so that no horizontal
scrolling is needed to read the text, even when the content part of
the page has wide images that will require horizontal scrolling.

So far, I've been able to accomplish either of these, but not both. 
Here are a couple links for specific examples:

http://www.pjrc.com/tech/8051/board4/first_use.html
Here, the browser wraps the text to fit nicely to whatever size the
window happens to be, but the content wraps below the nav bar so it's
not all from pixel 180 to the right edge.

http://www.pjrc.com/tech/8051/board4/first_use_table_formatted.html
Here, the content is nicely aligned at pixel 180 all the way down the
page, but the browser formats the text to match the width of the
widest image, so horizontal scrolling is needed with a window 800
pixels wide (the text doesn't reformat as you resize the window).

Horizontal scrolling is the greater of the two evils, but to
illustrate how ugly the content can look as it goes from 180-edge to
0-edge, consider this page:
http://www.pjrc.com/tech/8051/pm2_docs/functions.html
On this page, there aren't graphics, so the table formatting would
work... but what I'm really holding out for it a universal approach I
can apply to all the page on the site (I generate the nav bars with
some scripts, so the script would insert the formatting markup at the
top and bottom of the content.)


So can I have my cake and eat it too??


My final request is that whatever solution, it needs be HTML 4.01 (I'm
slowly working towards 100% validation of the site to 4.01
transitional) and needs to work amoung a wide range of browsers, at
least IE 5.0/5.5/6.0, Netscape 4.7x, Mozilla 1.x.  A good portion of
the people visiting the site are linux users, and some browse with
Konqueror, others with Netscape or Mozilla... though I'm less
concerned if the solution is standards compliant and Konq has a bug.


Feel free to copy these sample page or other pages from the site to
play with changing their formatting.

Hi,

   I have reviewed the pages that you listed as examples and am basing
this answer on my experience as a web devloper for over 7 years.

You could easily format the text as you stated in tables so that it
would wrap and wouldn't produce the horizontal scrolling.  You have
that problem already resolved.  What I have done when faced with this
problem is to layout my page in tables.  The left (navigation column
would be 160 pixels wide, a second column would be 20 pixels wide with
a "blank.gif" image 20 pixels wide inserted into it to hold the
correct width regardless of the browser viewing the page.  The third
column (containing my text would be created to "*" so that it would
take up the remainder of the window.  Now here is the only solution I
have ever reached to keep from dealing with horizontal scrolling with
large images.
I either 1) embed my images but add the "width" and "height" tags to
my "img src" and hyperlink the image to the image so the user can
access the larger view or 2) create a thumbnail of my larger images
and embed the thumbnail linking it to the larger image.  That way I
can control the size of the images being displayed regardless of
browser type or user screen resolution.

This may not be the type answer you are looking for but I have found
that it is highly effective on various designs and layouts I have
created.  It is also completely compliant with HTML standards.  It
provides consistency across various browser types and screen
resolutions and doesn't cause extensive work arounds.

I hope that this has been helpful and wish you success with the web
site you are designing.

Regards,
Morningstar

---

Request for Answer Clarification by pjrc-ga on 28 Sep 2002 03:40 PDT

I do not understand how to apply this answer to my pages.  Could you
modify either of these pages as a sample to illustrate the technique:

http://www.pjrc.com/tech/8051/board4/first_use.html
http://www.pjrc.com/tech/8051/board4/first_use_table_formatted.html

The second of these two uses a table layout similar to what is
described in the answer, except perhaps for "text would be created to
"*" so that it would
take up the remainder of the window" (I do not understand what that
means).

It is not an acceptable answer to alter the content by reducing the
image sizes to tiny thumbnails and require the user to click on them
to view the actual image, or to make any other substantial changes to
the content part of the page.  Take a moment to review the sample
page, and imagine how it would look if the images were small
thumbnails with unreadable text instead of exact representations of
what the user will see on their screen.

The goal (as explained in the question) is to find a formatting
technique which combines the text wrapping of the first sample page
with the nice left margin of the second sample page.  A secondary
goal, which I alluded to in the question but should have specified
more clearly, is to add this formatting to the existing pages
automatically using the scripts which already add the nav bars to the
pages.  The critical point is that the content already exists for all
these pages and it is not an option to make substantial changes to it.

---

Clarification of Answer by morningstar2000-ga on 28 Sep 2002 08:47 PDT

Hi,

To try and clarify my answer here is the code to lay out the content
area in a table format so that the navigation bar (160 pixels + 20
pixels of space) remains constant down the left side of the page.

<html>

<head>
</head>

<div align="left">
  <table border="0" cellpadding="0" cellspacing="0" width="100%"
height="100%">
    <tr>
      <td width="160">Navigations goes here</td>
      <td width="20"><img border="0" src="images/blank.gif" width="20"
height="20"></td>
      <td width="*">Your text and images go here</td>
    </tr>
  </table>
</div>

</body>

</html>


	Some of your images are about 780pixels wide which is causing the
table to stretch and the text to go off the right side resulting in
horizontal scrolling.  Using the lay out above by itself will not
solve this problem but will correct the left side problem.

	The only other solution I can see to keep the text from running over
the right side is that you can place the text in a table just as you
have with the graphics and captions.
Each time you start a new text area (paragraph in some cases) start a
table and set it to 720 pixels wide.  This will allow the text to
remain on the screen for users with 800x600 resolution, which is the
standard that most web pages are created to accomodate.

	As for the "*" I suggested earlier, and is used in the table example
above, it simply tells the browser that that cell of the table is
designed to take up the remainder of the window space, regardless or
resloution.

	Redesigning your page to demonstrate these would be difficult since I
would have to be able to post the results and that causes a few other
problems, (ie copyright infringement since I would be posting your
company's site).

	I hope this provides some of the clarification you requested.  The
simplest solution to the problem still seems to be reducing the size
of some of your images so they do not exceed 720 pixels (your
remaining text area).  I tried this using image editing software here
and it did not degrade the image at all.

Reagrds,
Morningstar

I was very disappointed with the answer.  It was essentially just one
of the two approachs I posted in my question, and it definately did
not acheive the two desired result of combining the properties of both
approaches that I posted.

One way you could maybe achieve your effect is to use Javascript and
CSS to redefine the <p> tag.  You can use the JS to figure out the
width of the page, and then set every <p> tag to have a particular
width matching the width of the page (or maybe the page width minue 20
pixels or something.)  Of course, you have to make sure that all
content is wrapped by <p></p> tags, but with good HTML, that should be
done anyway.

If you don't want to redefine the <p> tag, you could always just use
the same technique to create a particular <p> or <div> class that you
could call from every paragraph you want to wrap.

I am not satisfied with this answer.  It does not achieve the
requested result.  To be specific, the original question asked for
"content is nicely aligned at pixel 180 all the way down the page" AND
"browser wraps the text to fit nicely to whatever size the window
happens to be".

The answer achieves the first of these, but for the second all that is
suggested is:

    "Each time you start a new text area (paragraph in some cases)
start a
    table and set it to 720 pixels wide.  This will allow the text to
    remain on the screen for users with 800x600 resolution, which is
the
    standard that most web pages are created to accomodate."

This causes a fixed width formatting (and 620 would be correct for a
800 pixel wide window, not 720, and even that doesn't take into
account the pixels used by the window edges and margins).  This is
about as far from "browser wraps the text to fit nicely to whatever
size the window happens to be" as can be imagined, since it only works
for an 800 pixel window.

I do not care that 800 pixels is today's norm for many sites.  Only a
few years ago, 640 pixels was the norm, and perhaps soon it'll be
1024.  These norms also assume the user with a small screen will
maximize their window, and that users with larger screens will not. 
But whatever the "norm" is, I ABSOLUTELY WILL NOT ACCEPT FIXED
FORMATTING.  The text MUST be formatted by the browser to fit whatever
size window the user has.


I am debating whether to simply rate this answer low or request a
refund.  Either way, I'll try again at a higher dollar level, perhaps
$50 or $100, and I'll make it absolutely clear what is expected in the
answer.  I though it was clear what I wanted, and I am very
disappointed that the answer is essentially one of the two methods I
posted with a minor hack to adjust the text to a smaller fixed width,
but clearly not automatically word wrapped by the browser as I wanted
and specified in the question.

Assuming...
  1) you want the image to be clipped if it can't fit in the window
  2) you don't mind the extra work it takes to insert an image

then you can try...

<html>
	<body>
		<table width=100%>
			<tr>
				<td width=100>
					Left Side
					<br>
					Left Side
					<br>
					Left Side
					<br>
					Left Side
					<br>
					Left Side
					<br>
					Left Side
					<br>
					Left Side
					<br>
					Left Side
					<br>
					Left Side
					<br>
					Left Side
				</td>

				<td>
					<p>
					Right Side Right Side Right Side Right Side Right Side Right Side
					Right Side Right Side Right Side Right Side Right Side Right Side
					Right Side Right Side Right Side Right Side Right Side Right Side
					Right Side Right Side Right Side Right Side Right Side Right Side
					Right Side Right Side Right Side Right Side Right Side Right Side
					</p>
					
					<div style="margin-left: 20px;">
						<div style="background-image:
url(http://www.pjrc.com/tech/8051/board4/board_w_serial.jpg);
background-repeat: no-repeat; width: 100%; height: 340px"></div>
						<b>Figure 1:</b> Apply DC Voltage and Attach Serial Cable To
Upper Port
					</div>
					
					<p>
					Right Side Right Side Right Side Right Side Right Side Right Side
					Right Side Right Side Right Side Right Side Right Side Right Side
					Right Side Right Side Right Side Right Side Right Side Right Side
					Right Side Right Side Right Side Right Side Right Side Right Side
					Right Side Right Side Right Side Right Side Right Side Right Side
					</p>
				</td>
			</tr>
		</table>
	</body>
</html>


Note: I only tested on IE 6.  I didn't bother testing on anything
else.