473,226 Members | 1,433 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,226 software developers and data experts.

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.
Jul 12 '06 #1
16 2962
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.
Jul 14 '06 #2
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
Jul 14 '06 #3
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.
Jul 14 '06 #4
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.
Jul 14 '06 #5
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ô
Jul 14 '06 #6
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?
Jul 14 '06 #7
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...
Jul 14 '06 #8
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
Jul 14 '06 #9
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!
Jul 14 '06 #10
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
Jul 14 '06 #11
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.
Jul 14 '06 #12
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
Jul 14 '06 #13
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...
Jul 14 '06 #14
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
Jul 14 '06 #15
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/
Jul 15 '06 #16
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?
Jul 19 '06 #17

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Doug McCrae | last post by:
http://www.btinternet.com/~doug.mccrae/go4learning/index.html As it says in the subject, a two column layout (plus header and footer boxes). I feel the left column really needs to be fixed width...
8
by: Zak McGregor | last post by:
Hi all I have a simple 3 column css layout here: http://www.carfolio.com/newlook.dhtml However, when the centre column is wider than the screen (yes, it does happen on some pages on the site...
16
by: Dan V. | last post by:
How do you do a css 2 column layout with header and footer, with the 2nd column auto-stretching so entire page looks good for 800 x 600 resolution as min. and 1024 x 768 resolution as a max? ...
10
by: Ed | last post by:
The page I'm working on is at http://www.coldpizzasoftware.com/temp/layout.html I trying to get the yellow sidebar to go in the white area to the right of the green content area and between the...
15
by: Tamblyne | last post by:
This problem has got to have a simple solution and I can't be the first person who has ever handled it. Perhaps Google is no help because I'm not using the right terms? (I did find one post...
3
by: Spondishy | last post by:
OK... After a previous post, I've decided that the site layout will be two columns The layout will be: 1) Page 100% wide 2) Right column will be fixed 150px, left column will use the rest...
7
by: Andrew | last post by:
I've been struggling to achieve the following layout for some time now and I'm not getting anywhere. I've tried several approaches including floats & absolute positioning and none seem to work,...
31
by: Sarita | last post by:
Hello, this might sound stupid, but I got a really nice homepage template which unfortunately is a 3-Column Fixed Width CSS format. Now I don't have any content for the right column and would...
3
by: hzgt9b | last post by:
I want a page with a centered div containing two rows. Top row has an image and some text. The bottom row needs to have three columns. I'd love to have the 1st column set to a fixed width then have...
1
Death Slaught
by: Death Slaught | last post by:
I will be showing you how to make a very simple but effective three column layout. First we will begin with the HTML, or structure, of our three column layout. <!DOCTYPE html PUBLIC...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.