html css two

[kw]

A new html learner is here. Please help.
I write a two column web page. Their widths are both fixed.
The left one is a menu and the right one is mainly for content
display. I pasted a few lines as the following:

#leftcolumn{
background-color: white;
clear: left;
width: 176px;
margin-left: 3px;
margin-right: 3px;
float: left;
margin-top: 3px;
}

#rightcolumn{
background-color: transparent;
width: 560px;
float: left;
overflow: auto;
border-left: 1px solid #C3C3C3;
padding-left: 10px;
padding-right: 10px;
margin-top: 6px;
padding-bottom: 1em;
}

The web page is correct when the browser's window is wide enough;
it behaves incorrectly when the window is narrow. That is say the
right column automatically flushes to underneath the left column.

What property can be specified to lock the right column?

Thank you very much,

[BT]

I'm pretty new at this, too, but perhaps you could put both column into
another <div'box' with adequate width for both the left and right column,
560 + 176 px. (I'm not sure, but you might have to add in the width of the
margins also.)

It's worth a try until some of the more experienced folks make their
suggestions.

good luck.
"kw" <bi**@village.o rgwrote in message
news:f3******** **@mailhub227.i tcs.purdue.edu. ..

>A new html learner is here. Please help.
I write a two column web page. Their widths are both fixed.
The left one is a menu and the right one is mainly for content
display. I pasted a few lines as the following:

#leftcolumn{
background-color: white;
clear: left;
width: 176px;
margin-left: 3px;
margin-right: 3px;
float: left;
margin-top: 3px;
}

#rightcolumn{
background-color: transparent;
width: 560px;
float: left;
overflow: auto;
border-left: 1px solid #C3C3C3;
padding-left: 10px;
padding-right: 10px;
margin-top: 6px;
padding-bottom: 1em;
}

The web page is correct when the browser's window is wide enough;
it behaves incorrectly when the window is narrow. That is say the
right column automatically flushes to underneath the left column.

What property can be specified to lock the right column?

Thank you very much,

[John Hosking]

kw wrote:

A new html learner is here. Please help.
I write a two column web page. Their widths are both fixed.

You *are* new.

The left one is a menu and the right one is mainly for content
display. I pasted a few lines as the following:

#leftcolumn{
background-color: white;
clear: left;
width: 176px;
margin-left: 3px;
margin-right: 3px;
float: left;
margin-top: 3px;
}

#rightcolumn{
background-color: transparent;
width: 560px;
float: left;
overflow: auto;
border-left: 1px solid #C3C3C3;
padding-left: 10px;
padding-right: 10px;
margin-top: 6px;
padding-bottom: 1em;
}

The web page is correct when the browser's window is wide enough;
it behaves incorrectly when the window is narrow. That is say the
right column automatically flushes to underneath the left column.

No, that's correct, too. You've made them floats, and you've given them
pixel-based widths, so the browser complies as ordered. No problem there.

The real problem, I would say, is the idea of fixed widths. You're
requiring all visitors to have a browser viewport of 182 + 580 = 762px.
Anything wider, and the user has empty, wasted space to the right of
their viewport. Any narrower, and they see what you're complaining
about, although what you really want is that they get a horizontal
scrollbar. Horizontal scrolling is best avoided.

So the real answer, I would say, is to use percentage widths, or some
design which is more flexible.

But another idea is to remove the floats, and add a left margin of about
182px to the right element. That'll push it right of the left element,
and it'll stick out into space on the right side of the UA.

Setting widths in pixels is rather icky, though, and I recommend you
avoid it (unless, say, you're working with images alone, for which
pixels are natural units). If it's nav left and text content right that
you've got, consider ems or, as I said, % widths (you have to pay
attention to what the percentages are percentages of, but you'll work it
out).

May I suggest you rename your #leftcolumn to something semantically
contextual, such as #nav, and #rightcolumn to something like #content?

>
What property can be specified to lock the right column?

If you want to "lock", don't "float".

--
John

[JD]

kw wrote:

A new html learner is here. Please help.
I write a two column web page. Their widths are both fixed.
The left one is a menu and the right one is mainly for content
display. I pasted a few lines as the following:

#leftcolumn{
background-color: white;
clear: left;
width: 176px;
margin-left: 3px;
margin-right: 3px;
float: left;
margin-top: 3px;
}

#rightcolumn{
background-color: transparent;
width: 560px;
float: left;
overflow: auto;
border-left: 1px solid #C3C3C3;
padding-left: 10px;
padding-right: 10px;
margin-top: 6px;
padding-bottom: 1em;
}

The web page is correct when the browser's window is wide enough;
it behaves incorrectly when the window is narrow. That is say the
right column automatically flushes to underneath the left column.

What property can be specified to lock the right column?

Enclose both divs in a fixed-width wrapper. Also, float the #rightcolumn
div right, not left. This will create a natural gutter between the two
columns provided the widths of the two nested divs fall short of the
width of the wrapper.

[David E. Ross]

JD wrote:

kw wrote:

>A new html learner is here. Please help.
I write a two column web page. Their widths are both fixed.
The left one is a menu and the right one is mainly for content
display. I pasted a few lines as the following:

#leftcolumn{
background-color: white;
clear: left;
width: 176px;
margin-left: 3px;
margin-right: 3px;
float: left;
margin-top: 3px;
}

#rightcolumn {
background-color: transparent;
width: 560px;
float: left;
overflow: auto;
border-left: 1px solid #C3C3C3;
padding-left: 10px;
padding-right: 10px;
margin-top: 6px;
padding-bottom: 1em;
}

The web page is correct when the browser's window is wide enough;
it behaves incorrectly when the window is narrow. That is say the
right column automatically flushes to underneath the left column.

What property can be specified to lock the right column?

Enclose both divs in a fixed-width wrapper. Also, float the #rightcolumn
div right, not left. This will create a natural gutter between the two
columns provided the widths of the two nested divs fall short of the
width of the wrapper.

If you use "a fixed-width wrapper", you are likely to force right-left
scrolling for any user whose window is not wide enough. This is so
annoying that you will lose some of your audience.

Instead, follow the advice in earlier replies to use percentage widths.
That way, your page will adapt to whatever window width the user has.

--

David E. Ross
<http://www.rossde.com/>.

Don't ask "Why is there road rage?" Instead, ask
"Why NOT Road Rage?" or "Why Is There No Such
Thing as Fast Enough?"
<http://www.rossde.com/roadrage.html>

[JD]

David E. Ross wrote:

JD wrote:

>kw wrote:

>>A new html learner is here. Please help.
I write a two column web page. Their widths are both fixed.
The left one is a menu and the right one is mainly for content
display. I pasted a few lines as the following:

#leftcolumn {
background-color: white;
clear: left;
width: 176px;
margin-left: 3px;
margin-right: 3px;
float: left;
margin-top: 3px;
}

#rightcolum n{
background-color: transparent;
width: 560px;
float: left;
overflow: auto;
border-left: 1px solid #C3C3C3;
padding-left: 10px;
padding-right: 10px;
margin-top: 6px;
padding-bottom: 1em;
}

The web page is correct when the browser's window is wide enough;
it behaves incorrectly when the window is narrow. That is say the
right column automatically flushes to underneath the left column.

What property can be specified to lock the right column?

Enclose both divs in a fixed-width wrapper. Also, float the #rightcolumn
div right, not left. This will create a natural gutter between the two
columns provided the widths of the two nested divs fall short of the
width of the wrapper.

If you use "a fixed-width wrapper", you are likely to force right-left
scrolling for any user whose window is not wide enough. This is so
annoying that you will lose some of your audience.

And yet the Web is packed to the nines with fixed-width designs,
including high-profile sites that cater to enormous and diverse
audiences, e.g. http://news.bbc.co.uk/ .

If I was browsing the Web in anything less than 800x600 I would expect
to see my horizontal scrollbar pretty often. It's not such a big deal
either because most fixed-width sites use multi-column layouts, and
usually the individual columns of multi-column sites will fit in a
narrow display nicely, even if the entire width of the site won't. So,
you can simply scroll the relevant column into the confines of the
display in order to read it comfortably (for me, the annoying thing is
not horizontal scrolling per se, but having to scroll along while
reading). In my view, this is no worse than the site squishing down to
absurdly narrow proportions, or the structure breaking as described in
the original post.

Instead, follow the advice in earlier replies to use percentage widths.
That way, your page will adapt to whatever window width the user has.

Instead, look at what people are doing in the real world. If successful
websites are using fixed-width layouts, you can be pretty confident that
it doesn't send too many visitors away screaming.

[Bergamot]

JD wrote:

>
If successful
websites are using fixed-width layouts, you can be pretty confident that
it doesn't send too many visitors away screaming.

Consider also that these big web sites, like BBC, are often successful
in spite of their sites, not because of them. Name recognition goes a
long way in tolerating a lousy site.

--
Berg

[David C. Stone]

In article <5c************ *@mid.individua l.net>, Bergamot
<be******@visi. comwrote:

JD wrote:

If successful
websites are using fixed-width layouts, you can be pretty confident that
it doesn't send too many visitors away screaming.

Consider also that these big web sites, like BBC, are often successful
in spite of their sites, not because of them. Name recognition goes a
long way in tolerating a lousy site.

Yes, definitely. I hate the way the width of the page never expands
when you zoom the text size so you can actually read the stupid page...

I can mostly understand designers wanting to avoid having everything
horribly squished if the user makes the window too narrow, but why would
you not want your text content to be able to make the best use possible
of a window which is actually wider than 800 pixels, especially if the
user might very well want to enlarge the text size?

You'd think with the increasing number of boomers getting shortsighted
with age that some senior managers somewhere would actually be insisting
on this...

[Dr J R Stockton]

In comp.infosystem s.www.authoring.html message <MaSdnQMs-vhv-MLbnZ2dneKd
nZ******@iswest .net>, Thu, 31 May 2007 17:18:57, David E. Ross
<no****@nowhere .notposted:

>
If you use "a fixed-width wrapper", you are likely to force right-left
scrolling for any user whose window is not wide enough. This is so
annoying that you will lose some of your audience.

Nor necessarily. My windows generally open nominally 480 px wide, and
that very commonly shows the interesting part without revealing the
advertisements.

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Delphi 3? Turnpike 6.05
<URL:http://www.merlyn.demo n.co.uk/TP/BP/Delphi/&c., FAQqy topics & links;
<URL:http://www.bancoems.co m/CompLangPascalD elphiMisc-MiniFAQ.htmclpd mFAQ;
<URL:http://www.borland.com/newsgroups/guide.htmlnews: borland.* Guidelines

[Chaddy2222]

Bergamot wrote:

JD wrote:

If successful
websites are using fixed-width layouts, you can be pretty confident that
it doesn't send too many visitors away screaming.

Consider also that these big web sites, like BBC, are often successful
in spite of their sites, not because of them. Name recognition goes a
long way in tolerating a lousy site.

Yes, the names "MySpace" and several other large sites includeing
some newspaper websites come to mind.
--
Regards Chad. http://freewebdesign.awardspace.biz