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.orgwrote in message
news:f3**********@mailhub227.itcs.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;
}

#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.

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.individual.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.infosystems.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.demon.co.uk/TP/BP/Delphi/&c., FAQqy topics & links;
<URL:http://www.bancoems.com/CompLangPascalDelphiMisc-MiniFAQ.htmclpdmFAQ;
<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

[Chaddy2222]

David C. Stone wrote:

In article <5c*************@mid.individual.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...

Well yes but.... It's not really the managers job to know what works
in a particular situation when it comes to items such as website
creation, although it does not help matters when the managers are
shown eather a print out of the website, or in the case of a number of
designers, they show the client an image of what the site will look
like in a PSD file.
--
Regards Chad. http://freewebdesign.awardspace.biz

[David Stone]

In article <11**********************@a26g2000pre.googlegroups .com>,
Chaddy2222 <sp***********************@yahoo.com.auwrote:

David C. Stone wrote:

[snip]

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...

Well yes but.... It's not really the managers job to know what works
in a particular situation when it comes to items such as website
creation, although it does not help matters when the managers are
shown eather a print out of the website, or in the case of a number of
designers, they show the client an image of what the site will look
like in a PSD file.

Ah yes, I've run into that a couple of times: the "web site"
printed in glorious technicolour on nice, big pieces of paper.
But when you actually go and try to USE the stupid thing...

[David E. Ross]

Chaddy2222 wrote:

David C. Stone wrote:

>In article <5c*************@mid.individual.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...

Well yes but.... It's not really the managers job to know what works
in a particular situation when it comes to items such as website
creation, although it does not help matters when the managers are
shown eather a print out of the website, or in the case of a number of
designers, they show the client an image of what the site will look
like in a PSD file.

The manager who authorizes the work to be done and approves paying for
it must have some responsibility for the results.

Although my <http://www.rossde.com/internet/Webdevelopers.htmlappears
to be a rant against Web developers who fail to adhere to standards, it
is actually targeted towards managers who arrange for Web pages to be
developed. That is why I explain HTML, CSS, etc in layman's terms and
why I discuss standards in the context of a busness's audience.

--

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>

[Stan Brown]

Mon, 04 Jun 2007 19:17:53 -0700 from David E. Ross
<no****@nowhere.not>:

Although my <http://www.rossde.com/internet/Webdevelopers.htmlappears
to be a rant against Web developers who fail to adhere to standards, it
is actually targeted towards managers who arrange for Web pages to be
developed.

A silly question perhaps, but why not rewrite it so that it actually
says what you want it to say? If it's "not actually a rant against
Web developers", why make it look like one?

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you