2 column layout

[Jef Driesen]

I have created a nice idea for a website and now I would like to
translate that idea in (x)html and css. The layout is quite basic: a
header, two columns and a footer. For a graphical presentation, see
http://users.telenet.be/sacn/tmp/layout.png.

I would like to have:
* source ordered columns: header, content, sidebar, footer
* fixed width columns (either px or em units). Because I don't like
reading very long lines and IE does not support the max/max-height
properties.
* columns don't need to have their own background color or image (no
faux columns or equal-height colums necessary).
* fixed height header (I will place a background image here)
* everything centered in the browser window
* good browser support: IE5+, Gecko, Opera,...

I want to use as few div's as possible, e.g. something like below:

<div id="container">
<div id="header"></div>
<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>

I did search on the internet for a suitable template to start with, but
couldn't find one.

[akress]

Something like this?

http://www.w3schools.com/css/tryit.a...=trycss_float6

--Adam

Jef Driesen wrote:

I have created a nice idea for a website and now I would like to
translate that idea in (x)html and css. The layout is quite basic: a
header, two columns and a footer. For a graphical presentation, see
http://users.telenet.be/sacn/tmp/layout.png.

I would like to have:
* source ordered columns: header, content, sidebar, footer
* fixed width columns (either px or em units). Because I don't like
reading very long lines and IE does not support the max/max-height
properties.
* columns don't need to have their own background color or image (no
faux columns or equal-height colums necessary).
* fixed height header (I will place a background image here)
* everything centered in the browser window
* good browser support: IE5+, Gecko, Opera,...

I want to use as few div's as possible, e.g. something like below:

<div id="container">
<div id="header"></div>
<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>

I did search on the internet for a suitable template to start with, but
couldn't find one.

[Chris F.A. Johnson]

On 2006-07-14, ak****@gmail.com wrote:

Something like this?

http://www.w3schools.com/css/tryit.a...=trycss_float6

One would hope not; it doesn't scale:

<http://cfaj.freeshell.org/www/2column.jpg>

--
Chris F.A. Johnson, author <http://cfaj.freeshell.org>
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
===== My code in this post, if any, assumes the POSIX locale
===== and is released under the GNU General Public Licence

[Jef Driesen]

ak****@gmail.com wrote:

Something like this?

http://www.w3schools.com/css/tryit.a...=trycss_float6

No, this one has no source ordered columns, e.g. the sidebar comes
before the content. In the meantime I am experimenting with a layout
using floats and negative margins. I'll upload the result to my website,
once I have most parts working.

[Jef Driesen]

Chris F.A. Johnson wrote:

On 2006-07-14, ak****@gmail.com wrote:

>Something like this?

http://www.w3schools.com/css/tryit.a...=trycss_float6

One would hope not; it doesn't scale:

<http://cfaj.freeshell.org/www/2column.jpg>

I understand why you consider a fixed width layout a bad choice
(especially with large fonts), but reading very long lines (e.g. on a
widescreen monitor) is also not very attractive.

[Els]

Jef Driesen wrote:

I understand why you consider a fixed width layout a bad choice
(especially with large fonts), but reading very long lines (e.g. on a
widescreen monitor) is also not very attractive.

A max-width in ems takes care of that.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Daniela Mercury - Dona Canô

[Jef Driesen]

Jef Driesen wrote:

I have created a nice idea for a website and now I would like to
translate that idea in (x)html and css. The layout is quite basic: a
header, two columns and a footer. For a graphical presentation, see
http://users.telenet.be/sacn/tmp/layout.png.

I would like to have:
* source ordered columns: header, content, sidebar, footer
* fixed width columns (either px or em units). Because I don't like
reading very long lines and IE does not support the max/max-height
properties.
* columns don't need to have their own background color or image (no
faux columns or equal-height colums necessary).
* fixed height header (I will place a background image here)
* everything centered in the browser window
* good browser support: IE5+, Gecko, Opera,...

I want to use as few div's as possible, e.g. something like below:

<div id="container">
<div id="header"></div>
<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>

I did search on the internet for a suitable template to start with, but
couldn't find one.

I have created a template using floats and negative margins, inspired by
an article at http://www.alistapart.com/articles/negativemargins/.

First I created the basic two column layout
(http://users.telenet.be/sacn/tmp/v1/) and added some horizontal padding
later (http://users.telenet.be/sacn/tmp/v2/), which needs a box model
hack in IE5.x.

There are some issues caused by the margins of the <h1and <pelements
in the header and footer, but removing the margins and adding padding to
their parent elements can fix that: http://users.telenet.be/sacn/tmp/v3/
Only in IE6 the top padding of the footer is too large now.

In IE, there is also no bottom margin for the container div. Changing
around some margin and padding does fix this also:
http://users.telenet.be/sacn/tmp/v4/.

There is one problem left in IE5.x. The top and bottom margins of the
content and sidebar (actually the margins of the first and last element
inside them) disappear. I could add some padding
(http://users.telenet.be/sacn/tmp/v5), but this breaks in modern
browsers because there is to much space now (padding+margin). And I
don't know a method to fix that!

Opera 7+ seems fine already. Can someone check and report in some other
browsers?

[Jef Driesen]

Els wrote:

Jef Driesen wrote:

>I understand why you consider a fixed width layout a bad choice
(especially with large fonts), but reading very long lines (e.g. on a
widescreen monitor) is also not very attractive.

A max-width in ems takes care of that.

That's a very good point, but IE doesn't support that. And IE is still
one of the most used browsers. And in my case (a small website for the
local diving club), being nice to most users (using IE) is more
important than supporting a few users with visual handicaps (using large
fonts).

And there is also the possibility to specify those fixed widths in ems...

[Els]

Jef Driesen wrote:

Els wrote:

>Jef Driesen wrote:

>>I understand why you consider a fixed width layout a bad choice
(especially with large fonts), but reading very long lines (e.g. on a
widescreen monitor) is also not very attractive.

A max-width in ems takes care of that.

That's a very good point, but IE doesn't support that. And IE is still
one of the most used browsers. And in my case (a small website for the
local diving club), being nice to most users (using IE) is more
important than supporting a few users with visual handicaps (using large
fonts).

IE can be made to play nice (albeit quite a bit more complex than
other browsers):
<http://www.svendtofte.com/code/max_width_in_ie/>

And there is also the possibility to specify those fixed widths in ems...

Which means that when you only have an 800x600 screen, and you crank
up the font-size, you end up scrolling horizontally for each line you
wanna read.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Fluitsma & Van Tijn - 15 miljoen mensen

[Jef Driesen]

Els wrote:

Jef Driesen wrote:

>Els wrote:

>>Jef Driesen wrote:

I understand why you consider a fixed width layout a bad choice
(especially with large fonts), but reading very long lines (e.g. on a
widescreen monitor) is also not very attractive.
A max-width in ems takes care of that.

That's a very good point, but IE doesn't support that. And IE is still
one of the most used browsers. And in my case (a small website for the
local diving club), being nice to most users (using IE) is more
important than supporting a few users with visual handicaps (using large
fonts).

IE can be made to play nice (albeit quite a bit more complex than
other browsers):
<http://www.svendtofte.com/code/max_width_in_ie/>

I will certainly take a look at that. But after a very quick reading, it
seems they are using non-standards syntax, which will not validate. I
will need to take a closer look.

>And there is also the possibility to specify those fixed widths in ems...

Which means that when you only have an 800x600 screen, and you crank
up the font-size, you end up scrolling horizontally for each line you
wanna read.

If you view a liquid layout with a large font on a such a small screen,
you have to read a very narrow column. Also not optimal!

[Els]

Jef Driesen wrote:

>>And there is also the possibility to specify those fixed widths in ems...

Which means that when you only have an 800x600 screen, and you crank
up the font-size, you end up scrolling horizontally for each line you
wanna read.

If you view a liquid layout with a large font on a such a small screen,
you have to read a very narrow column. Also not optimal!

True, but if I'd have to choose between very narrow columns or using
my mouse and scrollbar for every single line, I'd choose the narrow
column. What would you choose?

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Dr Alban - Sing hallelujah

[Jef Driesen]

Els wrote:

Jef Driesen wrote:

>>>And there is also the possibility to specify those fixed widths in ems...
Which means that when you only have an 800x600 screen, and you crank
up the font-size, you end up scrolling horizontally for each line you
wanna read.

If you view a liquid layout with a large font on a such a small screen,
you have to read a very narrow column. Also not optimal!

True, but if I'd have to choose between very narrow columns or using
my mouse and scrollbar for every single line, I'd choose the narrow
column. What would you choose?

I would also prefer the narrow column.

[Beauregard T. Shagnasty]

Jef Driesen wrote:

(http://users.telenet.be/sacn/tmp/v5)

None of your samples fit in my browser window without a horizontal
scrollbar.

Your liquid is drying out... <g>

--
-bts
-Warning: I brake for lawn deer

[Jef Driesen]

Beauregard T. Shagnasty wrote:

Jef Driesen wrote:

>(http://users.telenet.be/sacn/tmp/v5)

None of your samples fit in my browser window without a horizontal
scrollbar.

Your liquid is drying out... <g>

How large is your browser window? And there never was any liquid...

[Beauregard T. Shagnasty]

Jef Driesen wrote:

Beauregard T. Shagnasty wrote:

>Jef Driesen wrote:

>>(http://users.telenet.be/sacn/tmp/v5)

None of your samples fit in my browser window without a horizontal
scrollbar.

Your liquid is drying out... <g>

How large is your browser window?

It was maximized on my 800x600 laptop. Allowing for scrollbars, there is
about 770px left for you.
http://k75s.home.att.net/bgridmarginset.html

And there never was any liquid...

Ah, but there should be! ;-)
http://allmyfaqs.net/faq.pl?AnySizeDesign

--
-bts
-Warning: I brake for lawn deer

[Stephen Poley]

On Fri, 14 Jul 2006 12:34:46 +0200, Jef Driesen
<je********@hotmail.com.invalidwrote:

>IE can be made to play nice (albeit quite a bit more complex than
other browsers):
<http://www.svendtofte.com/code/max_width_in_ie/>

I will certainly take a look at that. But after a very quick reading, it
seems they are using non-standards syntax, which will not validate.

To put it mildly. However one can put this in a separate file and
include it within an IE conditional comment. Then nothing other than IE
receives it.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Jef Driesen]

Jef Driesen wrote:

I have created a nice idea for a website and now I would like to
translate that idea in (x)html and css. The layout is quite basic: a
header, two columns and a footer. For a graphical presentation, see
http://users.telenet.be/sacn/tmp/layout.png.

I would like to have:
* source ordered columns: header, content, sidebar, footer
* fixed width columns (either px or em units). Because I don't like
reading very long lines and IE does not support the max/max-height
properties.
* columns don't need to have their own background color or image (no
faux columns or equal-height colums necessary).
* fixed height header (I will place a background image here)
* everything centered in the browser window
* good browser support: IE5+, Gecko, Opera,...

Based on the feedback in this newsgroup an some further research, I
decided to drop the fixed width template and create a liquid layout. My
first attempt can be viewed here:
http://users.telenet.be/sacn/www/templates/liquid/v1/

It is based on http://www.alistapart.com/articles/negativemargins/. Only
disadvantage is I need an extra <divin the content column, but the
advantage is I don't need any box-model hack anymore. The only issue
remaining (as far as I know) is the bottom-margin of the last element in
the two columns is added to the padding, which results in to much
whitespace. I don't know a method to remove this margin (besides adding
a special class to the last element, but this is easily to forget when
creating pages). And removing the padding results in no whitespace in
older browsers like IE5.x.

Is there a way to hide the max-width workaround for all browsers (except
IE <= 6) without using conditional comments?