By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,954 Members | 1,592 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,954 IT Pros & Developers. It's quick & easy.

Centering 2cols without tables / dynamic resizing of figures

P: n/a
For some time I've made use of the max-width property in CSS to cause
my pages to appear as a centered block against a contrasting
background. This works well in new browsers (Mozilla, etc.) and falls
back fine in IE6 and lesser creations. As one who practices "classic"
(i.e. dull) typography, this has always been satisfactory since I've
always used one-column pages.

I'm now trying a two column layout so I can include a sidebar, and am
retesting this arrangement. The trick is to get the main content block
and the sidebar to "stick" to each other as the page is widened. If
you have a wide monitor, the max-width for content plus sidebar should
be 56em, and they will stay together as the viewport is widened (i.e.,
the sidebar won't move away from the content block). Only two divs are
used: div.content for the main block, and div.ads for the sidebar.
This is my test page:

http://rjohara.net/middlebury

I use a Mac and have limited PC access, but a quick check with Wintel
IE6 showed the arrangement to work reasonably well, but my
dynamically-resized images were acting oddly, something I thought I
had tested before. When the page first appears the images are
distorted, but if you adjust the viewport at all they snap into place.
I'm not sure where this problem lies, but I don't think it's in my two
column arrangement, which is my concern at the moment.

If any users (non-Mac especially) would like to test this and let me
know of any display problems I'd be grateful. This approach seems to
allow the centering of a two-column block with no use of tables, and
only two divs.

Many thanks.

Bob O'Hara (http://rjohara.net)
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
"Robert J. O'Hara" <rj*****@post.harvard.edu> wrote in message
news:bd**************************@posting.google.c om...
For some time I've made use of the max-width property in CSS to cause
my pages to appear as a centered block against a contrasting
background. This works well in new browsers (Mozilla, etc.) and falls
back fine in IE6 and lesser creations. As one who practices "classic"
(i.e. dull) typography, this has always been satisfactory since I've
always used one-column pages.

I'm now trying a two column layout so I can include a sidebar, and am
retesting this arrangement. The trick is to get the main content block
and the sidebar to "stick" to each other as the page is widened. If
you have a wide monitor, the max-width for content plus sidebar should
be 56em, and they will stay together as the viewport is widened (i.e.,
the sidebar won't move away from the content block). Only two divs are
used: div.content for the main block, and div.ads for the sidebar.
This is my test page: The sidebar floats over the main at larger text/narrow width (IE6 - PC). http://rjohara.net/middlebury

I use a Mac and have limited PC access, but a quick check with Wintel
IE6 showed the arrangement to work reasonably well, but my
dynamically-resized images were acting oddly, something I thought I
had tested before. When the page first appears the images are
distorted, but if you adjust the viewport at all they snap into place.
I'm not sure where this problem lies, but I don't think it's in my two
column arrangement, which is my concern at the moment.

If any users (non-Mac especially) would like to test this and let me
know of any display problems I'd be grateful. This approach seems to
allow the centering of a two-column block with no use of tables, and
only two divs.

The lawn.jpg does not get as small as the other pictures - really breaks up
the display. Very nice looking site, however the picture sizes needed for
this effect make dial-up load very slowly.
HTH

--
TK
www.wejuggle2.com
Still Having a Ball


-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----
Jul 20 '05 #2

P: n/a
"Terry Kimpling" wrote in message...
The lawn.jpg does not get as small as the other pictures - really breaks up
the display. Very nice looking site, however the picture sizes needed for
this effect make dial-up load very slowly.
HTH


Yes, that was probably a poor choice as a test page since I'm working
on two things at the same time: the resizing of figures and the
sidebar, and I may not have either down quite right. Here is a cleaner
sample, a plain text page with the sidebar:

http://rjohara.net/coins/references/

The two columns are created with just two divs and no tables;
max-width for body is 56em and because left and right body margins are
auto the two columns should stay centered and should stick together
even when the viewport is wide. In browsers that don't support
max-width the fallback should be very clean: the right column is fixed
width and the left column will expand along with the viewport.

RJO
Jul 20 '05 #3

P: n/a
In message <bd**************************@posting.google.com >, Robert J.
O'Hara <rj*****@post.harvard.edu> writes
"Terry Kimpling" wrote in message...
The lawn.jpg does not get as small as the other pictures - really breaks up
the display. Very nice looking site, however the picture sizes needed for
this effect make dial-up load very slowly.
HTH


Yes, that was probably a poor choice as a test page since I'm working
on two things at the same time: the resizing of figures and the
sidebar, and I may not have either down quite right. Here is a cleaner
sample, a plain text page with the sidebar:

http://rjohara.net/coins/references/

The two columns are created with just two divs and no tables;
max-width for body is 56em and because left and right body margins are
auto the two columns should stay centered and should stick together
even when the viewport is wide. In browsers that don't support
max-width the fallback should be very clean: the right column is fixed
width and the left column will expand along with the viewport.

RJO


Works OK in Netscape (7.02).

But the sidebar is completely missing in Opera (7.51) and Internet
Explorer 6.

regards.
--
Jake
Jul 20 '05 #4

P: n/a
In message <bd**************************@posting.google.com >, Robert J.
O'Hara <rj*****@post.harvard.edu> writes
For some time I've made use of the max-width property in CSS to cause
my pages to appear as a centered block against a contrasting
background. This works well in new browsers (Mozilla, etc.) and falls
back fine in IE6 and lesser creations. As one who practices "classic"
(i.e. dull) typography, this has always been satisfactory since I've
always used one-column pages.

I'm now trying a two column layout so I can include a sidebar, and am
retesting this arrangement. The trick is to get the main content block
and the sidebar to "stick" to each other as the page is widened. If
you have a wide monitor, the max-width for content plus sidebar should
be 56em, and they will stay together as the viewport is widened (i.e.,
the sidebar won't move away from the content block). Only two divs are
used: div.content for the main block, and div.ads for the sidebar.
This is my test page:

http://rjohara.net/middlebury

I use a Mac and have limited PC access, but a quick check with Wintel
IE6 showed the arrangement to work reasonably well, but my
dynamically-resized images were acting oddly, something I thought I
had tested before. When the page first appears the images are
distorted, but if you adjust the viewport at all they snap into place.
I'm not sure where this problem lies, but I don't think it's in my two
column arrangement, which is my concern at the moment.

If any users (non-Mac especially) would like to test this and let me
know of any display problems I'd be grateful. This approach seems to
allow the centering of a two-column block with no use of tables, and
only two divs.

Many thanks.

Bob O'Hara (http://rjohara.net)

Netscape 7 : Pictures re-size OK, but sidebar is missing

Opera 7.71 : Sidebar present, but pictures distort as viewport is
narrowed

IE6 : Pictures always displayed as same width as each other (so some
pixelation on some); sidebar is missing.

regards.
--
Jake
Jul 20 '05 #5

P: n/a
Robert J. O'Hara wrote:
For some time I've made use of the max-width property in CSS to cause
my pages to appear as a centered block against a contrasting
background. This works well in new browsers (Mozilla, etc.) and falls
back fine in IE6 and lesser creations. As one who practices "classic"
(i.e. dull) typography, this has always been satisfactory since I've
always used one-column pages.

I'm now trying a two column layout so I can include a sidebar, and am
retesting this arrangement. The trick is to get the main content block
and the sidebar to "stick" to each other as the page is widened. If
you have a wide monitor, the max-width for content plus sidebar should
be 56em, and they will stay together as the viewport is widened (i.e.,
the sidebar won't move away from the content block). Only two divs are
used: div.content for the main block, and div.ads for the sidebar.
This is my test page:

http://rjohara.net/middlebury

I use a Mac and have limited PC access, but a quick check with Wintel
IE6 showed the arrangement to work reasonably well, but my
dynamically-resized images were acting oddly, something I thought I
had tested before. When the page first appears the images are
distorted, but if you adjust the viewport at all they snap into place.
I'm not sure where this problem lies, but I don't think it's in my two
column arrangement, which is my concern at the moment.

If any users (non-Mac especially) would like to test this and let me
know of any display problems I'd be grateful. This approach seems to
allow the centering of a two-column block with no use of tables, and
only two divs.

Many thanks.

Bob O'Hara (http://rjohara.net)


Works just fine with Mozilla 1.6

The picture resizing is a lovely effect and all pictures resise equally.

--
Bill Drescher
william {at} TechServSys {dot} com
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.