3 equalizing col layout +header +footer

Hi,

What about If I only want 2 cols that follows each other??

Well a simpler design could probably be achieved for 2 columns but using my 3 column layout as above you only need to delete the right column and then take away the right margin on the outer element.

The left column size can be increased by increasing the margin left on the outer class but make sure you also increase the float to match. Also, you wont need the repeating gif for the colour as the background colour will show through

I’ve just redone it very quickly in less than 5 minutes (so I hope there are no errors).

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

Hope that helps, but shout if it’s not what you want.

Paul

Thanks, It confuses me a little when the head and footer is there too. I will try to get it to work and come back if it doesn’t =)

Here is what i’ve done so you can take a look at it:
PAGE: http://www.shell.linux.se/lundberg/ssa/index.php
CSS: http://www.shell.linux.se/lundberg/ssa/css/eskiimo.css

Right under the menu I want two cols. Left col should be the content col where the main text will be and the left col will be like a sidebar. much like alistapart and simplebits.

Any tips would be great =)

Hi,

Any tips would be great =)

Do you want your content to be 100% high even when the content is less? If so you will need to set html,body {100%} and also set your container to 100%, plus add the height:auto for mozilla browsers etc.

If not then don’t bother.

If you have two columns and you want them to be the same length then you can have the main column in the flow and then float the right column right.

Set a right-margin on the main content and a corresponding left margin on the float. You may have to fiddle to make the margin occupy the same space. (negative margin on the float etc).

By doing this the main content will have a border if it is longer than the float. If the float is longer the floats border will increase making it look like two equalising columns as they both share the same border. You will need to add a clear:both after the content to push the bottom border down.

Alternatively you can use the same method as in my example where you make the main content shorter than the space it has to fill (ie margin-left:160px;) and then float the right column in the main content and then drag it outside of the content to form its own column. (Remembering to keep a slight overlap so that a footer will be pushed downwards.)

If you need a normal footer then that should be ok. If you want a footer at bottom of window then you will need to refer to my example and use negative margins and a spacer div to compensate.

Thats roughly how to do it :wink: If you get stuck just shout and I’ll give you some code when I know exactly what you want.

Paul

Hi,

Heres the simple version (no height and no footer):
CSS:


#contentLayer {
 margin-right:149px;
 text-align:left;
 border-right:1px solid #FFF;
 padding-left:2px;
color:#fff;background:#000;
}
#contentLayer p, #contentRight p {margin-top:0}
#contentRight {
 float:right;
 width:149px;
 border-left:1px solid #fff;
 position:relative;
}

Html:


etc........ 
<div id="menuItemLayer">
  <ul>
   <li id="current"><a href="">Blog</a></li>
   <li><a href="">Fotografier</a></li>
   <li><a href="">Jag</a></li>
   <li><a href="">Arbeten</a></li>
   <li><a href="">Länkar</a></li>
  </ul>
 </div>
[b] <div id="contentRight">
  <p>Right Content</p>
  <p>Right Content</p>
  <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>[/b]
</div>
</body>
</html>

If you need a different colour for the right column you may need to do that with a background repeating gif on the right side of the container.

Paul

hmm, hehe =) CSS is alittle tricky when it comes to taking the tables away. Well what I want is this. Under my menu div, I want 2 cols, the left one should be like 500px wide and the left one 200. The cols should not be at the bottom if there aren’t that much text in them but I do want a footer under them.

Have to go! =) Thanks for the help!

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>
[b]  <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>[/b]
</div>
</body>
</html>

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

Paul

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

Hi,

It is working!! It’s just that you can’t see it :slight_smile:

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 :slight_smile:

Hope that helps.

Paul

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! =)

Thanks for the help! =)

You’re welcome :slight_smile:
Paul

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:

[color=#0000b1]http://www.pmob.co.uk/temp/3colfixedtest_explained.htm[/color]

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.

[color=#0000b1]http://www.pmob.co.uk/temp/3colfixedtest_4.htm[/color]

Hope that some help to those that have asked.

Paul

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.

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 :slight_smile:

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 :slight_smile:

Hope that helps but if you get stuck just shout.

Paul

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.

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

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.

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

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.

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

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