3 Column Css Layout

Quatrux

Feb 22 2007, 12:50 AM

To make a CSS layout with two columns isn't a problem, but when making a 3 column layout without tables, I encountered some things where I find tables to be better for designing layouts.. so here is my problem: I have a menu bar at the left, a sidebar at the right and the content/center bar at the center of the page and of course a header and a footer with which I didn't have any problems, the problem is with the content/center bar, here is what I have: (all links won't be anchors, due to those pages are only temporary) quatrux.net/index_css.html but my pages aren't strict with fixed width, so here is the problem: quatrux.net/index_cssx.html - when the left menu bar gets longer in width, all the layout breaks, the effect which I want to get is here: quatrux.net/index_tables.html - this is made with pure old tables, from which I am trying to run away and you can see here: quatrux.net/index_tablesx.html - the center/content bar doesn't break when the left menu bar gets longer as this is with made with tables and everywhere I am using nowrap except for the content/center bar.

So I want to do it with divs and without tables, but have the same effect like with tables.. I don't want my three columns to be strict with: 200px or something, I want that the left and right bars could be white-space: nowrap; and could get wider if some menu link will be longer or any text without breaking a line with a br tag.. so somehow I need the content/center bar to get between the left and right bar and be there, the same like a table.. and if the left and right sidebars gets wider/longer in width, the content/center bar would get smaller as it won't be using nowrap option.. I hope I was understood and didn't confuse anyone to much.. I really want this to be solved, I tried a lot of things Today and even #css support channels on freenode, but this is something what needs to be looked at a bit longer than one minute, so I really would be grateful if anyone could help me., as I am more a programmer, than a designer and don't have an idea what to do further.

Comment/Reply (w/o sign-up)

jlhaslip

Feb 22 2007, 09:30 AM

As I understand it, you want a three column flex-width design? If for some reason all three columns get stretched by the width, the horizontal scrolling will force visitors away, but it is your site, I suppose.

I visited the tabled sites and neither of them had sidebar content longer than the centre section, so I am confused about what you want or need. POst back with clarification, please.

Comment/Reply (w/o sign-up)

Quatrux

Feb 22 2007, 10:16 AM

Well, the examples in the url shows what I want, to clarify: I want that the left sidebar would be able to stretch to the right side and the right sidebar could stretch to the left side ("I did this and it does that, but the problem is!") the problem is that I need that when any of those sidebars ("left and/or right") stretches, the center bar could get smaller to give the sidebars enough place..

when using tables, here is the normal layout: quatrux.net/index_tables.html and here is how I want it to work: quatrux.net/index_tablesx.html - on the tablesx page, see the difference, how the left sidebar got wider due to I made the word 'Free-for-all-Links' longer by adding several letters sss to it and the center/content bar or the middle bar just got smaller in width.. I want to have this kind of an effect using CSS divs..

Here is what I have done with CSS without tables: quatrux.net/index_css.html it is without tables and when I make the same on it with adding several letters to the word on the left sidebar 'Free-for-all-Links', the middle bar just breaks like this: http://www.quatrux.net/index_cssx.html and I want it to NOT break and work the same as with the tables layout! Am I clear enough?

[quick edit]

if I am using float: left for the left sidebar and float: right; for the right sidebar, I want to do something like this for the middle bar: float: between left and right sidebars and be flexible if they will push you, you just shrink and listen to them and don't break;

Comment/Reply (w/o sign-up)

Quatrux

Feb 23 2007, 05:05 PM

Sorry for the double post, but I have been told by a CSS master, that this is impossible to do with CSS and that CSS isn't tables, so I found one thing, which is bad about CSS divs

and that tables are better, but I can live with it and to avoid it, I won't have a word in the left menu bar longer than 'Free-for-all-links' and will be using fixed width for the middle bar/column

Comment/Reply (w/o sign-up)

patronus4000

Feb 23 2007, 08:52 PM

XD I tried to do this too. It worked in Firefox and, I believe, Opera, but not in Internet Explorer. (Another reason why we should all drop IE altogether!) You can set the display: to table-cell, which will display your div as an element that acts like a table cell. But until IE improves its CSS support, I don't think it is possible to make a cross-browser compatible three-column layout. I ended up using tables for the sidebar, content, and navigation with widths in percentages for flexible widths.

But if you ever find a way to make a pure three-column CSS layout, let me know!

Serena

Comment/Reply (w/o sign-up)

Quatrux

Mar 2 2007, 04:12 PM

I just made the layout work as I want with display: table; display: table-row; and display: table-cell; just as you said, but I haven't seen that you posted here, wanted to tell it for everyone and came back here.. Yeah, I know it doesn't work on IE, nor on 6th and 7th versions.. But still, I will use it, as the layout now is really flexible and easy to output and for IE, I will just check, if it is Internet Explorer, then I will just output the html version of tables, until IE8 might improve its CSS stuff.. but this is just double work, I might just use the old html tables way for every browser

*EDIT*

I found a way, that it would work on IE and on other browsers, the way I want to.. The idea is easy, for Opera, Firefox, Safari and Konqueror I am using one stylesheet, which is using display: table; display: table-row; and three display:table-cell for left, right and middle bars, no width in pixels, no nothing, everything is stretching the way you want to.. Everyone, knew this, but they all had problems with IE, the stupid browser, which is a big headache!

So another stylesheet is for IE, it isn't using the display: table, as IE5, IE6 and IE7 doesn't support it the right way, maybe IE8 will support it? Who cares, the way I have done is like this, I used float: left for the left bar, float: right for the right bar and also for the middle I used float: left, I didn't use any width stuff, except for all the body 774px in which all those divs exist, so now comes the main part:

CODE

div#content {
float: left;
width: expression((774 - (document.getElementById('menu').clientWidth + document.getElementById('sidebar').clientWidth)) + "px");
}

It works only in IE, I make the middle bar to use all the left empty space in the middle, due to I made the both sidebars white-space: nowrap; and when they get wider, the middle bar gets shrinker, the idea is using the expression, I sum the width of two sidebars (left and right) and I minus 774px from the sum, so the result is the middle space! It works very well on IE5, IE6 and IE7, but doesn't work on other browsers and I don't know if it works if javascript is off..

I browsed a lot of sites, everyone had the same problem and I found a solution and I am really happy with this little hack!!!

Comment/Reply (w/o sign-up)

patronus4000

Mar 4 2007, 01:31 AM

Thanks for the pm, Quatrux. =)

Wow, good job! You've hacked IE to work with a three-column CSS layout! I must say that I'll be trying this little technique the next time I make a three-column layout, though I'm still a bit hesitant in using Javascript. It is said that about 10% of all computer users have Javascript disabled, and I don't want to single them out of my designing. Just recently when I was working on my three-column design mentioned previously, I ripped all the Javascript out of there that was used to make the navigation appear on all pages (I would use SSI or PHP or something, but their host apparently didn't allow them to do that). The site, thankfully, was small enough so that if I had to change something on the navigation, there's only maybe five pages to edit.

OK, enough rambling for me. XD I'll try out this technique, but I'll keep an eye out for another non-Javascript hacks. Again, good job!

Serena

Comment/Reply (w/o sign-up)

mik

Mar 4 2007, 07:06 PM

Why? The easiest solution is display: inline on all floating elements, because IE messes up with float sizes.

Quatrux, can you please explain clearly in words what the issue was please?

Comment/Reply (w/o sign-up)

Quatrux

Mar 5 2007, 08:19 AM

Read all of my posts mik what was the issue, display: inline; doesn't help, unless you have content, but if it is empty or you will only center an image, the middle bar will be small floating to the left or if you will just give a size to, I mean width, the middle bar will break on different zoomings, or custom fonts or different fonts etc. This is a 3 column CSS layout where divs are used and there is no widths at all, it is shrinking and stretching like with the old good tables, but IE sucks, and there is two versions of it! for IE and for others.

Well, even though it is using Javascript, people who browse with javascrpt off needs to understand that the web doesn't work the same and besides, when the javascript is turned off, people will just see the same middle bar, just it won't stretch to the end of the right sidebar! Here is the online version for demonstration, those links are temporary!

quatrux.net/index_css.html - for Firefox, Opera and probably for Safari and Konqueror.
quatrux.net/index_css_ie.html - for IE5, IE6, IE7 only, shouldn't break on IE8 unless IE8 won't support expressions anymore..

The secret is if the left or right bar will stretch, the middle one will shrink.. how can they stretch? by adding a long word without breaking a line with a br, due to the left and right bars are using nowrap;

Comment/Reply (w/o sign-up)

closed

Mar 6 2007, 06:07 PM

You can create three column layout using the two column template.

CODE

CODE

i guess you already got the idea. just put two additional divs(the main-content and the the rightbar) inside the content.

sample code:

CODE

<div id="#sidebar">left side</div>
<div id="#content">
  <div id="#main-content">middle</div>
  <div id="#rightbar">right side</div>
</div>

css:
#sidebar {
width: 20%;
float: left;
}

#content {
  width: 80%;
  float: right;
}

#main-content {
  width: 70%; /* 70% of the 80%[width of the content] */
  float: left;
}

#rightbar {
  width: 30%; /* rightbar + main-content should be 100% */
  float: right;
}

note: the example was a fluid layout. extends from left to right. just a demo thought.

Comment/Reply (w/o sign-up)

Latest Entries

closed

Mar 7 2007, 12:46 PM

about my example... i just want to give you other idea. to make it works you need to clear the floats in #main-content and add bunch of css codes.

here another approach, so called "negative margin"

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>sample</title>
<style type="text/css">
body{
    margin:0;
    padding:0 15em 0 10em;
}
#frame{
    background-color:#f0f0f0;
    float:left;
    width:100%;
    border-left: 10em solid #f99; /* The width and bg color of the left bar */
    border-right:15em solid #cc9; /* The width and bg color of the right bar */
    margin-left:-10em;
    margin-right:-15em;
    display:inline; /* makes ie behaves like a dog */
}
#leftbar{
    float:left;
    width:10em;
    margin-left:-10em;
    position:relative;
}
#content{
    float:left;
    width:100%;
    margin-right:-100%;
}
#rightbar{
    float:right;
    width:15em;
    margin-right:-15em;
    position:relative;
}
</style>
</head>
<body>
    <div id="frame">
        <div id="content"><h2>Sample text in content</h2></div>
        <div id="leftbar"><a href="#" title="left links">Left Links</a></div>

        <div id="rightbar"><a href="#" title="right links">Right Side Links</div>
    </div>
</body>
</html>

this one is three separate divs, should be at equal height and works on most browser [including ie 5.5+].
em instead of px so that, it would expand fluently when zoom. overflow: hidden is to hide the excess letters in long lazy words.
the cons in this approach is that when you zoom, leftbar and righbar eats the space in contents area.
the pros is that the bgcolor of both rails match the height of the content area. no need for image. neat codes. no need for more css hackz.

Comment/Reply (w/o sign-up)

Quatrux

Mar 7 2007, 07:00 AM

Yeah, everybody knows that you can do your three column layouts with the width: 30%; etc. but on these kind of layouts, when the text doesn't break and goes straight with white-space: nowrap, the layout doesn't move, because it has a strict width to be 30%; For example, on your site Valkyria, when I will edit your source and change NEWS, to NEWSSSSSSSSSSSSSSSSSSS, the text will go over into the middle bar, with html tables or "my hack" it wouldn't.

Comment/Reply (w/o sign-up)

Valkyria

Mar 7 2007, 02:43 AM

I don't know if this can be of any help, but I always had the same problem to create designs similar to tables but using CSS only, until I came across the Grid Css layout from the Yahoo yui. Yahoo provides a set of css that you can use freely and supports any amount of columns you can think of.
The method they use is creating nesting grids. For example, if you want to have a side menu and main content, you just have two divs, and have their width in percentages.
for example:
#menudiv{width:30%}
#maincontent{width:55%} -<<< to allow for some safe space between them.

In case you need 3 columns, for example a main menu to the left, main content and a menu to the right, instead of having three divs floating, you subdivide the main content in two, giving each div a percentage too.
So you can have :

[attachment=431:cssexample.jpg]

And the content adjusts to different resolutions and window sizes.

I hope this can help with what you're looking for, if you want to try them out here's the link for the Yahoo CSS Grids

There you can also have a way to configure the grids with variable or fixed page widths, and the CSS already have the hacks for IE, which as usual, doesn't display correctly many CSS compliant sites. In case you are interested, Yahoo also offers a whole set of AJAX based scripts for your site, plus some examples to see them implemented.

Here you can visit our site Lambda Factory (still under construction) where I have used the 3 column grid for the layout.

Good luck!

Comment/Reply (w/o sign-up)

3 Column Css Layout - I am having some problems!

3 Column Css Layout - I am having some problems!

Latest Entries