Click here to get back home

html css two
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
html css two kw 05-31-2007
`--> Re: html css two Dr J R Stockton06-02-2007
Get Chitika Premium
Posted by kw on May 31, 2007, 4:19 am
Please log in for more thread options

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,



Posted by BT on May 31, 2007, 9:51 am
Please log in for more thread options

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.


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



Posted by John Hosking on May 31, 2007, 9:53 am
Please log in for more thread options


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

Posted by JD on May 31, 2007, 1:03 pm
Please log in for more thread options


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.

Posted by David E. Ross on May 31, 2007, 8:18 pm
Please log in for more thread options


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>

Similar ThreadsPosted
HTML reprocessor: how do you get rid of bloated (obese) MS-Word (normal or filtered) HTML? November 5, 2006, 8:14 pm
Share common HTML code among different HTML files? May 14, 2005, 11:05 pm
HTML Editor with WYSIWYG & Manual HTML Editing July 18, 2007, 10:32 pm
Differences between HTML 4.01 Strict and HTML 4.01 Transitional? May 31, 2005, 7:13 pm
Is there a difference between html document and html file? May 15, 2008, 10:05 am
HTML Templates in HTML-KIT or other sites April 4, 2005, 8:19 pm
html validation - html code help February 3, 2006, 12:50 pm
HTML Tidy vs. HTML Validator March 4, 2006, 8:02 am
Pass parameter from one HTML to another HTML June 16, 2006, 2:56 am
Difference of HTML 4.0 and HTML 4.01 April 8, 2005, 6:55 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap