3 equalizing col layout +header +footer

[jppp]

Thanks a lot, Paul. At first, I was looking at the source of the main page but when I looked further, I did realise that most of your demos had the CSS in the head. Also, I have been using the method given by runremix to view the css codes of the files which are linked to css files.
I do not have firefox but plan to download it soon and with the help of you and my other SitePoint friends, hope to upload a website and show it to you soon. Thanks once again.

[rumremix]

Yes, accessibility is an important goal for this site I'm building--part of the reason why I'd prefer doing it without tables. I'm curious as to how many of these older screen readers are still in service and how long they need to be catered to. If they are becoming obsolete then this may not be a major concern. Know of any stats on this?

And cross-browser compatibility is also very important for this site. I was able to get the table version to break the way you described in Opera. But the 3col-centred-fluid-centre.htm page you created falls apart a bit more in opera than the table version does: if you resize the page from the bottom a band of the body background shows through where the center and right columns should be directly above the footer. Know of any tweaks that fix that? But even your pmob.co.uk/temp/3colfixedtest_4.htm page has a little disappearing/reappearing footer glitch in opera. Of these three approaches, I actually think the table version has the least disturbing opera glitch. But they are all troubling. Is there any three column layout that works in opera?

[Paul O'B]

Hi,

Opera has always had redraw problems which is why I don't use it much. It does something strange on hover at times in normal layouts and causes the page to jump.

The only fix I know is not to use 100% height and use a layout like this which seems to be ok.

http://www.pmob.co.uk/temp/3col/3col-fixed-side-01.htm

I'm afraid I tend to ignore the opera problems as they usually only happen when you move the bottom of the window up and down which is not done very often and a quick refresh puts the page back in position.

There is some information on screen readers here but you will probably find something better on google.

http://www.webaim.org/techniques/scr...#linearization
http://tlt.psu.edu/suggestions/acces.../multicol.html

Sorry for the delay in replying - its been a busy day (and still is )

[rumremix]

Paul,

Thanks for the great links. And I've been reading some other pages I've found on the subject that seem to suggest a 3 cell table should not provide too much trouble for screen readers, especially if a "summary" tag is added to the table, giving the user a heads up to the layout and what to expect.

I am still troubled by the fact that older screen readers may read table content left-to-right, ignoring column borders. But one of the pages you linked to states that using divs instead of tables "will probably not resolve the issue of multiple column layouts for older screen readers." So it seems that using divs instead may not solve this problem anyway. Hopefully, the older readers aren't used much anymore. It would be interesting to see a statistic on that though.

Interestingly, the same page you linked to also states this:

"Some experts recommend using CSS styled DIV to set up layouts, but there are a number of serious pitfalls to be wary of. If in doubt, a layout table may be a better solution in the short term. It is not currently a part of Section 508 policy that all formatting tables be eliminated, just that they be accessible."

In all, this makes me a bit less concerned about a 3 cell layout table creating any serious accessibility concerns.

Thanks also for the new 3 column demo that works well in opera. I haven't had a chance to dig too deeply into the code yet but I am wondering what you believe to be the limitations of this approach to the 3 col layout. Could it be modified to accommodate my fluid-margins or fluid center (depending on viewport width) goal?

Thanks again for your highly informative replies.

[I, Brian]

Hi Paul -

Afraid I've got another quick question about using one of your menus with a custom id.

I'm testing out the "Drop Down vertical menu based on Suckerfish Menus"
http://www.pmob.co.uk/temp/ddusa.htm
Instead of

<ul id="nav">

I'm starting off the menu with

<ul id="menu">

and trying to ensure the ul & li definitions are customised just for the vertical menu, so as to not interfere with the use of ul & li elsewhere on the page.

I've tried to set up the following to imitate your previous correction for a different menu, but doesn't quite seem to be working. Main issue is that the menus just aren't expanding.

Still trying to find my feet with CSS, but if I'm doing anything obviously wrong a pointer would be much appreciated.

ul#menu {
    margin: 0;
    padding: 0;
    list-style: none;
    width:180px
}

 ul#menu li {
    position: relative;
    width:148px;
    border: 1px solid #ccc;
}
/* keep folowing styles together..........................*/
* html ul#menu ul {
    margin-left:-16px;/* ie5 fix */
    voice-family: "\"}\""; 
    voice-family: inherit;
}    
* html ul#menu li {float:left;/* hide float from ie5*/}
* html ul#menu ul {
    width:180px;    
    w\idth:148px;
    voice-family: "\"}\""; 
    voice-family: inherit;    
}
* html ul#menu ul {margin-left:0;/* hide margin from ie5*/}

/* keep above styles together .............*/

#menu li ul {
    position: relative;
    display:none;
}
#menu li ul li {
    width:149px;
    border-left:8px solid blue
}

/* Styles for Menu Items */
 ul#menu li a {
    display:block;
    text-decoration: none;
    color: #fff;
    background: #808080; /* IE6 Bug */
    line-height:2em;
    height:2em;    
    padding:0 5px
}
#menu li li a {background:#800000}

/* set dropdown to default */
#menu li:hover li a,#menu li.over li a {
    color: #fff;
   background-color: #c0c0c0;
}

/* this sets all hovered lists to red */
#menu li a:hover,
#menu li:hover a,#menu li.over a,
#menu li:hover li a:hover,#menu li.over li a:hover {
   color: #000;
   background-color: fcfcfc;
}

#menu li ul li  {  } /* Sub Menu Styles */
#menu li.on ul { display:block !important } /* The magic */
#menu li.off ul{display:none !important}
#menu li.on a{color:blue;font-weight:bold}/* set colour of selected item*/
#menu li.on ul a{background:#f2f2f2;color:#777;font-weight:normal}/* keep nested anchors original colour*/

body#services #menu li#xxservices ul{display:block} /* open chosen menu */
body#services #menu li#xxservices a{background:pink} /* set background color of list item's anchor*/
body#services #menu li#xxservices ul a{background:#f2f2f2}/* stop above from applying to nested links*/
body#services #menu li#xxservices ul a:hover{background:red}

body#services.host #menu li#xxservices ul li.hosting a{background:orange}/* the actual item chosen*/
body#services.host #menu li#xxservices ul li.webdes a{background:orange}/* the actual item chosen*/
body#services.host #menu li#xxservices ul li.imark a{background:orange}/* the actual item chosen*/
body#services.host #menu li#xxservices ul li.domain a{background:orange}/* the actual item chosen*/
body#services.host #menu li#xxservices ul li.broadband a{background:orange}/* the actual item chosen*/

body#about #menu li#xxabout ul{display:block} /* open chosen menu */
body#about #menu li#xxabout a{background:pink} /* set background color of list item's anchor*/
body#about #menu li#xxabout ul a{background:#f2f2f2}/* stop above from applying to nested links*/
body#about #menu li#xxabout ul a:hover{background:red}

body#about.hist #menu li#xxabout ul li.history a{background:orange}/* the actual item chosen*/
body#about.tea #menu li#xxabout ul li.team a{background:orange}/* the actual item chosen*/
body#about.offi #menu li#xxabout ul li.offices a{background:orange}/* the actual item chosen*/

body#contact #menu li#xxcontact ul{display:block} /* open chosen menu */
body#contact #menu li#xxcontact a{background:pink} /* set background color of list item's anchor*/
body#contact #menu li#xxcontact ul a{background:#f2f2f2}/* stop above from applying to nested links*/
body#contact #menu li#xxcontact ul a:hover{background:red}

body#contact.gb #menu li#xxcontact ul li.uk a{background:orange}/* the actual item chosen*/
body#contact.fran #menu li#xxcontact ul li.france a{background:orange}/* the actual item chosen*/
body#contact.us #menu li#xxcontact ul li.usa a{background:orange}/* the actual item chosen*/
body#contact.aust #menu li#xxcontact ul li.australia a{background:orange}/* the actual item chosen*/

[Paul O'B]

Hi Brian,

Sorry for the late reply but I didn't seem to get a message for this.

Have you changed the corresponding entry inhe javascript to match your change of name.

It's looking for an element called nav:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
if (document.getElementById) {
    var baseId = document.getElementsByTagName('body')[0].id;// these  3 lines set currently selected item to on
    var addclass= "xx" + baseId
    document.getElementById(addclass).className ="on";
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
        node = navRoot.childNodes[i];
        if (node.nodeName=="LI") {
        node.onclick=function() {        
        this.className = (this.className == "on") ? "off" : "on";

            }
           }
      }
 }
}
window.onload=startList;
//--><!]]>
</script>

Change it to match what you have.

[AirForceOne]

Hey Paul,

Just wanted to say thanks for all those examples on your site. They are very useful.

[Paul O'B]

Glad you found them useful

[rumremix]

Paul,

Do you have any fluid 2 column css layout examples on your site? The only 2 column one I found was rigid. Specifically, I'm looking for a layout that includes a header, rigid left column, fluid right column, and footer that hugs the bottom of the viewport (unless pushed below by content). Also, I want it all wrapped in a centered wrapper div to which I can apply min and max width.

Very easy with a table, of course but it seems like this should be well suited to pure css. Would the best way to do this involve the same techniques as your 3 column approach (minus a column), or is there a simpler method? I'm trying to do it using some simple floats but this seems to only work with a rigid width layout.

Any suggestions? Have you seen or created any examples of this type of layout?

Thanks.

[Paul O'B]

Hi,

Do you mean something like this:

http://www.pmob.co.uk/temp/2col-leftfixed.htm

[rumremix]

Yes, Paul. That's exactly it. You possess a very impressive collection of layout solutions. Thanks!

A question and an observation...

is the extra "inner-right" div necessary? I removed it without any observable effect.

Also, as a test, I tried swapping the "right" div with the "left" div in the html to see if it would break the page (my application doesn't necessarily require this but it's nice to see if the flexibility exists in case we want the search engines to see the right content first). Doing this caused the left content to slide down the page until it cleared the right content. Not sure why this would be as it seems that the float declarations should prevent this regardless of the div order.

In any case, this is just what I was looking for. Thanks again for this solution and your quick reply!

[Paul O'B]

Hi,

is the extra "inner-right" div necessary? I removed it without any observable effect.

Removing it won't affect the layout but if you float something in the right column and then you add an element with clear:both then not only will it clear that float it will also clare the whole left column - because thats what clear does. It clears all floats above it in the html.

The way to contain the clearing is to keep them inside a float itself - hence the extra inner-right floated element.

This demo explains why:
http://www.pmob.co.uk/temp/flclear1.htm

Doing this caused the left content to slide down the page until it cleared the right content. N

Because the right column is not floated then it will push the left column down if you change the source order.

You would need to use a negative margin technique like this which can have left or right columns first.

http://www.pmob.co.uk/temp/2col-leftfixed2.htm


Hope that helps

[rumremix]

hence the extra inner-right floated element.

Got it. Thanks. That could have bitten me later if I had left it out.

Your negative margin version works great with the divs in either order. And it uses just about the same amount of code. The only downside that I can see is that it doesn't seem to work in ie5.5. The lower div always seems to clear the higher div in ie5.5. Don't think we need to worry much about that browser anymore, so this may be ok. But in that case, we can probably safely toss this ie5 hack

* html #footer {/*only ie gets this style*/
height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
}

I couldn't find the impact of this hack on ie5.5 anyway. Do you think it is safe to toss? Or is it performing an important function that I wasn't able to deduce?

[Paul O'B]

Hi,

The only downside that I can see is that it doesn't seem to work in ie5.5.

The main issue has nothing to do with the layout but the way that ie5 handles lists. It adds a great big margin to the side that can be fixed with a negative margin on the list or more simply floating the list and the anchor and is a hack free solution.

As a rule of thumb I always try to float the list and the anchors and that solves whitespace bugs in ie6 also. (It depends on the layout of course and ie5mac doesn't like floats without widths much.)

There is also a "haslayout" issue in ie5 and 5.5. which can be cured by moving the negative margin for the right element to the left element instead.

But in that case, we can probably safely toss this ie5 hack

That's just the box model hack to account for the top and bottom borders on the footer which increase the height to 52px in good browsers but its only 50px in ie5+ so the box model hack needs to be applied. Its only 2px difference and is hardly noticeable and if your element doesn't have borders then it can be ignored.

Here is a revised layout with a fix for ie5 (although ie5 doesn't understand expressions so it just gets a percentage width instead so is 100% usable).

http://www.pmob.co.uk/temp/2col-leftfixed3.htm

I should point out that Opera is the only modern browser that doesn't like the 100% footer technique simply because it doesn't redraw the screen after a vertical resize. The problem in opera is only noticeable if you resize the bottom of the window up or down. The footer doesn't get redrawn in the new position but a simple refresh will make it pop back into position.

Its not a big deal as most people won't resize the bottom of the browser once the page has loaded anyway. It's been a problem in opera for as long as I can remember and is one of the reasons I don't use what would otherwise be a very good browser.

[rumremix]

I see. My footer has no border so I don't need that particular box model hack.

Yes, this revised layout fixes that issue in ie5.5 perfectly. And with only very little additional code.

ie5 doesn't understand expressions so it just gets a percentage width instead so is 100% usable

I should probably point out that the only ie5 browser version I have on my machine is ie5.5 and it does seem to understand the width controlling expression. So perhaps you are referring to an earlier ie5 version. Or perhaps my ie5.5 understands expressions because this standalone version is somehow influenced in the background by the ie7 browser that is officially on my machine. In any case, my ie5 browser scales without the added conditional. Maybe I should leave it there though, just to be safe.

Thanks!

[Paul O'B]

I should probably point out that the only ie5 browser version I have on my machine is ie5.5 and it does seem to understand the width controlling expression

Are you using the standalone version of IE5.5? The standalones don't work with conditionals unless you add the documented fixes.

The ie5.5 on my machine is behaving just like ie6.

IE5 however doesn't understand the expression and won't apply the min and max widths. I set it to 80% but you could set it to 100% width if you wanted with no problem.

[rumremix]

The standalones don't work with conditionals unless you add the documented fixes.

Yeah, I know. The standalones all think they are ie7 (or whatever latest installed version is). The way I test them is I simply temporarily change the conditional directed at them to instead call for lte ie7, then I view the page in the standalone before switching back. I am aware of the fixes but haven't taken the time to implement them yet.

I don't have ie5 on my machine. Only 5.5. And yes, it behaves just like ie6. Maybe I'll download ie5. But it's market share must be approaching nil. I don't have any statistics on ie5 vs 5.5 usage. But I'm guessing that the 2.9% of the browser market that the w3schools says ie5 still commands is really mostly ie5.5. Just a guess, though.

[Paul O'B]

Yes I think ie5 is very low usage and as long as the page is still usable then I don't think its worth spending too much time on the finer details

[Mojo5]

Hi Paul,

I've set up this layout based on your 2 column version, but I've done something wrong. The main "container" column matches the length of the "nav" column, but not the other way around. Do you think you could point out what is missing?

/*General*/
* {
margin: 0;
padding: 0;
}
body {
background: url(underdogsbackground.gif) repeat;
}
.wrapper {
margin: 30px auto 30px auto;
min-height: 100%;
width: 762px;
border: thin solid #000000;
}
#header {
height:  112px;
width: 100%;
}
#nav {
position: relative;
float: right;
margin: 0 -150px -5px 0;
width: 150px;
height: 100%;
min-height: 400px;
background: #CC66CC;
}
#container {
background: #FFFFFF;
margin-right: 150px;
float: right;
}
#footer {
position: relative;
clear: both;
height: 50px;
width: 100%;
}
/*Element Properties*/
img {
border: 0 none;
}

</head>

<body>
<div class="wrapper">

<div id="header">
<img src="hotdogs.gif" height="112" width="762" alt="header" />
</div>

<div id="container">

<div id="nav">
</div>

</div> <!-- close container -->
<div id="footer">
<img src="hotdogfooter.gif" height="50" width="762" alt="footer" />
</div>
</div> <!-- close wrapper -->
</body>
</html>

Thanks

[Paul O'B]

Hi,

You don't seem to have much left of my code lol.

You can't use 100% on the nav because it doesn't work like that. read the faq on 100% height for the explanation why

Here is your code revised.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/*General*/
* {
margin: 0;
padding: 0;
}
body {
background: url(underdogsbackground.gif) repeat;
}
.wrapper {
margin: 30px auto 30px auto;
width: 762px;
border: thin solid #000000;
background: #CC66CC;
}
#header {
height:  112px;
width: 100%;
background:red;
}
#nav {
position: relative;
float: right;
margin: 0 -149px -5px 0;
width: 150px;
left:1px;
}
#container {
background: #FFFccc;
margin-right: 150px;
}
#main{
width:100%;
float:left;
margin-right:-1px;
}
#footer {
position: relative;
clear: both;
height: 50px;
width: 100%;
background:red;
}
/*Element Properties*/
img {border: 0 none;}
.clearer{/* clear floats*/
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}

</style>
</head>
<body>
<div class="wrapper">
    <div id="header"> <img src="hotdogs.gif" height="112" width="762" alt="header" /> </div>
    <div id="container">
        <div id="nav">
            <p>nav column</p>
            <p>nav column</p>
            <p>nav column</p>
            <p>nav column</p>
            <p>nav column</p>
            <p>nav column</p>
            <p>nav column</p>
            <p>nav column</p>
            <p>nav column</p>
            <p>nav column</p>
        </div>
        <div id="main">
            <p>main content goes here : main content goes here : main content goes here : main content goes here : main content goes here : main content goes here : main content goes here : main content goes here : main content goes here : main content goes here : main content goes here : </p>
            <p>main content goes here : main content goes here : main content goes here : main content goes here : main content goes here : main content goes here : main content goes here : main content goes here : main content goes here : main content goes here : main content goes here : </p>
        </div>
        <div class="clearer"></div>
    </div>
    <!-- close container -->
    <div id="footer"> <img src="hotdogfooter.gif" height="50" width="762" alt="footer" /> </div>
</div>
<!-- close wrapper -->
</body>
</html>

The left column colour is the colour on the container and the right column colour is the colour from the wrapper and the right column itself. You may need to re-read the explanation again in the demo to understand what's going on

[Mojo5]

Thanks Paul,

I think I kinda get the idea now. The nav div did not so much expand without content, but just act as a place holder for when content was put into the div...I think... I guess I was just thinking of all those overflow hacks I've seen around.

I took out the main div and it still worked, is that a hack for something?

[Paul O'B]

I took out the main div and it still worked, is that a hack for something?

Yes you can get away without the #main div but I put it in there in case you floated something in the middle column and then used a clear propery afterwards. If you try to clear a float you then clear all floats above it in the html and that would include your side columns. which would mean that the center column content would then drop down below the side columns.

If you float the center section (#main ) and then any clear properties are contained within a parent float and don't affect other floats.

Here is a demo that explains it.

[skinnybonez]

hello...i know this is an old thread but, i thought i would post my question in here anyway because i think this is on the right track for the answer i am looking for.

what i am basically wanting to do is (see attached '3rowfixedfluid.jpg') to have a full browser layout in css with a repeating background that remains in the center and a layer above that that uses this background and matches it...while the top and bottom parts use the same hex color bg to fill up that space. the 'content area' would remain at a fixed size of 800x600.

any help at all is greatly appreciated.

- skinnybonez

[Paul O'B]

Hi,

I'm not sure that something like this is going to be usable but I think you mean something like these old demos.

http://www.pmob.co.uk/temp/blackandwhite7.htm
http://www.pmob.co.uk/temp/blackandwhite5.htm

[skinnybonez]

paul,

yeah... http://www.pmob.co.uk/temp/blackandwhite7.htm looks like what i am looking for...but, how exactly is that background working? i mean...for the color above the 800x600 content area making the top part white and the bottom black.

thanks a lot for the help.

- skinnybonez