2 column layout

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.

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.

On 2006-07-14, akress (AT) gmail (DOT) 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

akress (AT) gmail (DOT) 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.

Chris F.A. Johnson wrote:

On 2006-07-14, akress (AT) gmail (DOT) 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.

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 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 <h1> and <p> elements
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?

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

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

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!