Re: 2 column layout

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

Relevant Pages

  • Re: Creating a Letterhead Template
    ... a minor graphic--into the header. ... on the printed letterhead. ... and the bottom part in the First Page Footer. ... will have the normal margins. ...
    (microsoft.public.word.docmanagement)
  • Re: Printer friendly ASP.Net
    ... body {padding: 20px;} ... You can reduce the margin and padding specifically for print, as in my example, but the browser also adds margin outside that area, as well as the header and footer. ...
    (microsoft.public.dotnet.framework.aspnet)
  • Re: Word default?
    ... There is no text in the header or footer box. ... my first page of the document I have set for margins 1.5" top ... bottom is allowing an extra probably 3 inches to allow for this mammoth ...
    (microsoft.public.word.docmanagement)
  • Word problem
    ... I realize this is an Access forum, but I can't find a forum in Managed ... times Word somehow managed to make the size of the header and footer take up ... I think the header and footer margins caused ...
    (microsoft.public.access.modulesdaovba)
  • Re: Creating a Letterhead Template
    ... You need to put the top part in First Page Header ... and the bottom part in the First Page Footer. ... margins at 1" or 1.5"; ... You can wrap the header and footer graphics. ...
    (microsoft.public.word.docmanagement)