3 equalizing col layout +header +footer

[Paul O'B]

Hi,

This is the basics of it:

#contentLayer {
 margin-right:200px;
 text-align:left;
 border-right:1px solid #FFF;
 padding-left:2px;
}
#contentLayer p, #contentRight p {margin-top:0}
#contentRight {
 float:right;
 width:200px;
 border-left:1px solid #fff;
 position:relative;
 text-align:left;
}
#footer { 
 margin-top:-1.1em;
 clear:both;
 height:50px;
 background:blue;
 color:#fff;
}

html:

etc......
  </div>
  <div id="contentRight"> 
	<p>Right Content</p>
	<p>Right Content</p>
  </div>
  <div id="contentLayer"> 
	<p>Left content</p>
	<p>Left content</p>
	<p>Left content</p>
	<p>Left content</p>
	<p>Left content</p>
	<p>Left content</p>
	<p>Left content</p>
  </div>
  <div id="footer">Footer</div>
</div>
</body>
</html>

I'm sure you can tie the loose ends up.

Paul

[lundberg]

Thanks =) It helped, but still, the sidebar (rightContent) is not following the main content (height) You can go back and look att my site on the same address (both php file and css) as before. This is a problem i've allways had when i've tried myself to do a layout like this. =/

[Paul O'B]

Hi,

It is working!! It's just that you can't see it

The background colour of the left content must be set in the main container and not in the left content itself otherwise the effect will be spoilt.

Also the right column is a float and only has height auto. We do not colour the float but colour the right side of the container with a repeating gif.

Make yourself a repeating giv the same width as the float and about 10px high. This can just be a solid colour gif or a nice screenfade effect etc. This will not incur much overhead.

You just repeat it down the y axis on the right side of the container.

e.g.

#container {
 width: 	  700px;
 /*centering rule for other browsers*/
 margin: 	  auto;
 background: 	#000 url(leftcolbg.jpg) repeat-y right top;
 color:#fff;
}

I have this working perfectly locally and it looks good.

Now whichever column has the most text the background will always continue on both elements and give the effect of 2 columns. Exactly what was asked for

Hope that helps.

Paul

[lundberg]

Hey, you are right =P hehe, sorry for that. I wanted a border between the both cols too, and all i had to to was add a border to the right of the contentlayer and then also on the left of the rightcontent =) Nice nice! =))

Thanks for the help! =)

[Paul O'B]

Thanks for the help! =)

You're welcome
Paul

[Paul O'B]

Hi,

Regarding the three column layout and in answer to some requests for a clearer explanation of the techniques involved, I have posted a new page here that goes into detail on the structure of the page.

The address is here:

http://www.pmob.co.uk/temp/3colfixedtest_explained.htm

Once you read the explanation you will see that the layout is quite straightforward and does quite a lot with very little code.

If you can grasp the concept then you can use it in many different situations that before seemed impossible.

I have also added a 2 column layout for the benefit of those that have already asked. It was less than a five minute job to convert from 3 columns to 2 columns and the result can be accessed from the main demo here.

http://www.pmob.co.uk/temp/3colfixedtest_4.htm

Hope that some help to those that have asked.

Paul

[lundberg]

Paul! I've got another problem, or ehmmm it's the same. Now I saw that When the right column is longer then the left (main) column, then the main column's background color doesn't follow (do not go down to the footer). I will update the site on the net so you can see my problem.

[Paul O'B]

Hi,

You need to create a background image (or solid colour) that is 200px wide by 10px and then repeat it down the right side of the container. This will be your right column colour and will always extend with the container.

The colour of the left column is also dictated by the colour of the background in the container and not in the content layer itself.

This way both columns will expand at the same rate because they are in fact the same and cannot do otherwise.

So change your containers code to this:

#container {
width: 700px;
margin: auto;
background: #fff url(../leftcolbg.jpg) repeat-y right top;
border:	 1px solid #01274D;
}

The #fff is the left column colour and the repeating gif is the right column colour. That's all that's needed it's quite simple really

Just make sure you don't overwrite the background with one of the other elements. As I said before I had this working locally right from the beginning so I know it works ok

Hope that helps but if you get stuck just shout.

Paul

[John Colby]

Paul

I've been experiementing with speech readers and found that if the XHTML page is structured:

content
navigation
header
footer

and CSS used for positioning then it render better in speech engines with the content spoken first. Although I have to do more user tests this seems to work. Currently the page (looking at the 2 columns layout:

Header
Navigation (left col)
Content
Footer

Have you considered this variant in any of your designs yet? Thus far I've done a layout with fixing the header and navbar with absolute positioning but I'm not happy - needs more work.

[Paul O'B]

Hi John,

Yes thats a good point and in most of my designs that don't need equalising columns (or other fancy stuff) I try and structure it so the content comes first and then the header footer and nav can be placed absolutely at the end of the code.

If you look at the site I did for Rob (who sadly died) you will see the navigation is at the end of the html and the content comes first (apart from the header in this instance).
http://www.tunna-resources.co.uk/

The nav can be placed absolutely to the left and the content is just margined out of the way. The content can come first and the nav then placed at the end of the html. I find this method the simplest and most efficient.

If you use floats, as you know the float has to come first in the html which makes things harder. You could float the main content right then the content would come first. But this would usually mean giving the float a specific width when usually you want the nav to have the specific width and the float to be fluid.

(On another issue it is also good to place your absolutely placed elements after you have placed your static elements because both mozilla and IE will sometimes get it wrong this way. I did do a load of test where I placed absolute elements first in the html and then static items were supposed to ignore them but in some cases they didn't. Both ie and Mozilla occasionally behaved oddly.)

Paul

[John Colby]

Thanks Paul

I should have had this up and running over Christmas - but on Tuesday decided to install a demo of a Speech device - which crashed my PC so severely that it wouldn't boot into anything - and I've spent four days rebuilding it and getting it back to the state that it was in before.

Grrrrrrrrrr!

So I'm quite behind with this. I've looked at the tunna site - and will do again later - at this time of the monring i:m off to bed.

[lundberg]

Thanks again Paul! =) Works great and looks great =) Woho! I understand why you become the member of the month (november)! =)

[ucahg]

Forgive me, I didn't get a chance to spend much time on attempting this, but I ask if it's relatively simple to use this layout with relative-width headers, footers, and left and right columns, or not.

As I mentioned I haven't had a real chance to try too much yet, but would the 1 pixel difference cause problems (and can those problems be worked around)? And what about the 3 pixel jog for IE and preventing that? Thanks for all the insight you can provide.

[Paul O'B]

Hi,

I didn't get a chance to spend much time on attempting this, but I ask if it's relatively simple to use this layout with relative-width headers, footers, and left and right columns, or not.

I'm not sure what you mean by relative width headers and footers etc. Do you mean percentages?

The header and footers are basically 100% width anyway and I wouldn't see much point in having them at a different percentage. You could always place another element inside them if needed.

The left and right columns could be a percentage width but they would need to overlap the content by 1% (as mentioned in the explanation).

Obviously the margins on the content would then need to be in percentage to compensate. Although I haven't tried percentage columns I don't see why it shouldn't work although I don't think it will be quite as useful. (If I get a chance I may play around with it.)

If you want percentage heights on your header and footers then the layout could be made simpler. The reason is that we need elements to add up to 100%. Therefore we could have a header at 20% height, content at 60% height and a footer at 20%. This gives us our 100% height and would mean you wouldn't need some of the clearing divs.

The difficulty in my layout was having headers and footers of a fixed pixel height and still trying to make the page 100%.

However this is not what's usually required as you don't usually want your headers or footers to shrink in height.

There is a full explanation on the site of the techniques used which might help you but I might see if left and right fluid columns are usable or not

Paul

[Paul O'B]

And what about the 3 pixel jog for IE and preventing that?

That can be prevented by supplying surrounding content with a height of 1%. (Given to IE only - theres also an explanation about this technique in the link to the layout above).

Paul

[earther]

Wow, I am just now finding this link. Great work Paul. Where do you find the time to do all this! My head feels ready to split open just from working out my own CSS bugs! No brain cells left to get into anyone else's code. How do you do it? And why don't you have a shiny badge to recognize your contributions? (Hint, hint, mods.)

[E_Billy]

Great work Paul, although as you said I have seen variations of this layout before. A question that I have, is it possible to use the same 3 column layout, but not have it cover the width of the of the screen ??

Basically is it a case of combining this layout - http://bluerobot.com/web/css/center1.html - with your own ?? Will that validate ??

[E_Billy]

Paul,

Having played with the css for a bit, it seems as though it will work, as far as validating, we will have to wait and see.

Thanks again for another great post.

[Paul O'B]

Hi E Billy,

A question that I have, is it possible to use the same 3 column layout, but not have it cover the width of the of the screen

Yes it should just be a matter of giving the content larger margins so that it's smaller. The 2 outer floats should just hang out the edge as before.

There should be no problem validating as my example validates perfectly otherwise I wouldn't have put it up . (Note when using the star selector there should be no space between the * and the html e.g. *html not * html.)

I think the layout has its plusses and minuses but I've not seen another layout that works as well and as consistently.

Have fun with it

I managed to turn it into a 2 column layout at someones request and it only took a couple of minutes to change. (There is also another 2 column example online now that uses a slightly different technique.)

And why don't you have a shiny badge to recognize your contributions? (Hint, hint, mods.)

I thought I was supposed to get a badge with member of the month on but it never materialised

Thanks for your comments and glad you like the layout.

Paul

[Paul O'B]

Basically is it a case of combining this layout - http://bluerobot.com/web/css/center1.html - with your own ??

That layout is just simple basic css centering, its not really a layout. You'd be better off just extending the margins as mentioned in my above post. (Sorry I only just got to follow the link and see what was there )

Paul

[sethtrain]

Paul,

You might check out my thread on 3 col design. I am having major problems...

[ucahg]

I'm not sure what you mean by relative width headers and footers etc. Do you mean percentages?

Yes I meant relative heights (such as em's). Sorry about that.

[Paul O'B]

Hi,

Just added a 4 column equalising layout using the same techniques as the 3 column layout. (Haven't tested fully yet but I expect it to behave the same as the three column one.)

I hope you find it useful.

http://www.pmob.co.uk/temp/4colfixedtest_5.htm

Paul

[MetalAges]

Just when I think I got all the table rows and column quirks worked out...now I gotta get on the CSS train! lol

[Krieger]

Very nice Paul O'B.

I just used your 2 column example #2 and changed my site to that format.

Very easy to work with. I don't know CSS (much), but was still able to tailor it a bit to suit my needs.

Thanks!