I am finiding this example wery useful in my current project.
Thank you very much![]()
| SitePoint Sponsor |





I am finiding this example wery useful in my current project.
Thank you very much![]()

Hi Paul,
Just going back to post #118, I've tinkered with the 2 col centred layout (100% height) so that the content comes directly after the header in the HTML.
Here's the code - just wondered if I have done this correctly? (BTW, I've only tested in IE6 and Moz1.5):
Code:html, body {height:100%} body { margin: 0; padding: 0; font: x-small arial, hevetica, sans-serif; text-align: center; color: #505367; background-color: #e0e0e0; } html>body #container {height:auto;} #container { margin: 0 auto; width: 730px; height:99.8%; min-height:100%; text-align: left; background: #CEE0E1 url(images/toddbg.gif) repeat-y right top; border-left: 1px solid #a1a1a1; border-right: 1px solid #a1a1a1; position:relative; } html>#container {height:auto} #mainheader { position:absolute; left:0;top:0; height: 160px; width:100%; background-color: #fff; border-bottom: 1px solid #e6e6e6; z-index:1; } #header { height: 125px; width:100%; background-color: #D1DCE9; margin: 0px 0px 5px 0px; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; position:relative; z-index:2; } #mainnav { width:100%; height: 20px; background-color: #f5f5f5; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; position:absolute; top: 132px; z-index:2; } #sidebar { float: right; margin-top: 30px; width: 150px; padding:5px 0; } #content { float: left; margin-top: 30px; width: 560px; padding:5px 0 ; } #content p, #sidebar p, #mainnav p, #header p,#footer p {margin:0 5px 5px 5px} #footer { position:absolute; bottom:0; width:100%; height: 24px; background-color: #f5f5f5; border-top: 1px solid #e9e9e9; } .divider1 { width:100%; height:5px; overflow:hidden; background:#fff; position:relative; border-bottom: 1px solid #e6e6e6; } #clearfooter {height:27px;width:100%;clear:both} .blank , .blank2 { position:absolute; left:547px; width:7px; height:0px; overflow:hidden; border-top: 1px solid #fff; } .blank {top:-1px;} .blank2 {bottom:-1px;border-top:1px solid #fff; }HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="2columngray.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="mainheader"> <div class="blank2"></div> <!-- for decoration only --> </div> <div id="header"> <p>Header content goes here</p> <p><a href="2col_left.htm">Left </a>column Longest</p> <p><a href="2col_right.htm">Right</a> column Longest</p> <p><a href="2col_main.htm">No</a> column longest</p> <p><a href="http://www.pmob.co.uk/temp/3colfixedtest_4.htm">Back</a> to main 3 column demo</p> </div> <div id="content"> <p>Footer stays at the bottom of the window unless the content is longer then it stays at the bottom of the document.</p> <p>Footer stays at the bottom of the window unless the content is longer then it stays at the bottom of the document.</p> </div> <div id="sidebar"> <p>Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : </p> </div> <div id="mainnav"> <p>Navigation</p> </div> <div id="clearfooter"></div> <!-- to clear footer --> <div id="footer"> <div class="divider1"></div> <div class="blank"></div> <!-- for decoration only --> <p>Footer Content</p> </div> </div> </body> </html>
Ok, almost works in the IEs.
Your info was actually invaluable. I almost have this fixed... two issues remain, one serious, the other trivial.
Serious: It's fine when the window is large enough to show all photos in the center fully... but shrinking it results in overlap between the center content and the right column.
On Safari, Netscape it's working fine... shrinking the window starts to hide the center content with a 10px space between the clipping edge and the divider.
Comparison: Regular vs Photo
Trivial: (I hope)... on Mac IE, content that's long enough results in dividers that aren't.
Comparison: Regular vs Long
Please tell me this doesn't happen in PC IE 5 as well.
There's also a Small version but I'm pretty confident that's working ok.
CSS is at http://www.devilbearsolutions.com/te...est/styles.css


Hi pacman2504,
I've had a quick look and it seems to be working ok in ie5 and firefox except the navigation element isn't showing in the middle of the page.
If you still want it in the page then move it to the end of the html but berfore the last closing div of the whole page.
If you want to get the vcntent higher you could mess about with absolutely placing the header as well and that could also go last in the html. You jus need to make sure the absolute elements don't overflow but that shouldn't be difficult on a fixed width layout.Code:<p>Footer Content</p> </div> <div id="mainnav"> <p>Navigation</p> </div> </div>
Paul
Hmmm... wrong thread, Paul?

Here is an example of Paul's 3 column layout adapted for a specific user:
3 column layout example.
The site is still under construction - since I'm so pathetically slow at php. In any case you can see an adaptation of his layout. I place an image bg behind the right and left columns, as well as a different bg image behind the main content area (div id=outer). It was a very straightforward process to add the graphics, as well as resize the header/footer to suit the needs of my 'clients'.
Thx for the help along the way Paul.
Verwüstung rufen und des Krieges Hund' entfesseln!
My Site
My first php/MySQL project -->Thanks Sitepoint members


Paul,
First let me commend you on a fine job. I have been wrestling with a similar layout for the past two months. Many a time I have almost slipped back into tables, but I am just too stubborn. Now I will follow your design as the basis for my site, with a few tweaks.
First, I am looking to create a 2 column layout with a header and footer, then in the second (right) column I want to nest in a 3 column layout. I also want everything to expand properly. Each area should also have an individual color definition. My first attempts can be seen here.
http://www.evolutionmsport.com/template-home2.html
http://www.evolutionmsport.com/phptest/thurs2.php
That will be my home page, then I am planning to use your three column layout (w/content first) for the secondary pages, but what I wanted to do was under the header I wanted to put a sub header over the center and right columns.
Something similar to this.
http://www.evolutionmsport.com/phptest/thurs.php
Keep in mind all this is working code so it is sloppy. But am I asking too much of DIVs for these layouts. I was also toying with the border property to separate all the areas with a white space. Is that a bad practice.
Nevertheless, can my ideas be accomplished. The secondary pages of the website are basically your 3 column layout, but what is the best way to add the subheader.
For the main page, does nesting multi column divs in divs become too cumbersome.
Thanks.....Mike
Last edited by EvM-Mike; Apr 5, 2004 at 21:23. Reason: added content first


Hi Mike,
Sorry if this reply doesn't offer full solutions but I am just preparing to go away for a week so I'm in a bit of a rush.
Anyway I've just knocked up this example of a subheader straddling 2 columns:
http://www.pmob.co.uk/temp/3colfixed..._subheader.htm
It would have been easy but ie won't let you set an absolute elements width by defining right and left co-ordinates so it 's impossible to have an absolute element thats 100% wide minus one column width in ie.
The solution is to give moz the simple solution and ie the more convoluted solution. For ie I had to float an element with a 100% width of the centre column and then drag it right by 131 px to move over the right column. However this made it too short for the centre column so I added 131px padding to expand the 100% element and then placed another absolute element inside so the padding didn't take effect. (I shouldn't think ie5 will like this so you will need to work out another solution maybe for that).
The result works in ie6 and firefox but I haven't had time to de-bug in other browsers.
The other tweaks were to add top padding to the right column to clear the absolute element and a clearsub div to make room in the centre column.
Regarding your multi column nested layout I'm not sure this is possible as I don't think you will be able to get the 100% height formula to work on inner elements. It only seems to work on the first element in the html (gecko browsers anyway). You may be able to fiddle something with background images but again the fluid width will probably defeat this.
I'm sorry I didn't have more time to go through this properly but if you still want help I'll be back in a weeks time.
Paul


Paul,
Thanks...I am just heading out to some training, but I will check out the layout tonight...I am out of town as well, so I plan to play around with a few thgings and maybe by next week I could have my attempt on paper. Maybe then you could give it a quick look.
Again thanks for the help, it is greatly appreciated.
Thanks...Mike
how do u get each column with a different background? i cant seem to do itcheck my site at- http://www.geocities.com/b4igogetmyowndomain/index.htm


Hi absolutelyconfus,
From the look of that page you do look absolutely confused.
You can give any element a background colour or image by specifying it in the css for that element.
e.g.
The problem is when you want 100% high elements and for that I will refer you to my demo in this thread where there is a better explanation. Suffice to say this is not and easy task and only works in certain situations.Code:#test { background: #fff url(img.gif) repeat top left; height: 95px; width: 50%; }
I suggest you read the thread thoroughly and try to understand the concepts so you can apply them to your layout.
As there is very little to go on in your page I can't really offer any suitable code yet except to say that you need to tidy your html up. (You have 2 body tags in your code.)
From the look of your code you seem to be looking for a 2 column layout so I suggest you check out the 2 col layouts in my demo (see the link in the first post of this thread).
If you are going to use absolute positioning for your menu (which is fine to do) just be aware thet you will then be unable to have a footer underneath the whole page as an absolute element is removed from the flow and will not influence other elements. The alternative is to float the menu instead.
Hope this helps a bit
Paul


Paul/Everyone,
I have spent the past week reviewing your various pages and think I may be able to get everything I need to work to a point. I have created two pages that basically look the same. One of them is based on the design you came up with for me:but if you still want help I'll be back in a weeks time
http://www.evolutionmsport.com/test/evm-paul.php
While the other is a variant of my original page, which I think is based on “Big Johns” approach:
http://www.evolutionmsport.com/test/evm-john.php
Both seem to work fine in Explorer, but the “paul” pages runs into problems on Netscape 7.x. If you start making the page smaller the left and right columns creep up on you. Is this something I screwed up in the process of tweaking your page?
Both pages are very similar. I will post the DIV code and leave the rest out.
The Paul Page:
<body>
<div id="outer">
<div id="left"><?php include ("left.html") ?></div>
<div id="right"><?php include ("right.html") ?></div>
<div id="clearheader"></div> <!-- to clear header -->
<div id="centrecontent"> <!--centre content goes here -->
<div id="subheader">
<div id="subinner">Sub Header</div>
</div>
<div id="clearsub"></div>
<?php include ("content.html") ?>
</div>
<div id="clearfooter"></div> <!-- to clear footer -->
</div><!-- end outer div -->
<div id="footer"><?php include ("footer.html") ?></div>
<div id="header"><?php include ("header.html") ?></div>
</body>
The John Page:
<body>
<div class="wrapper">
<div class="header"><?php include ("header.html") ?></div>
<div class="outer">
<div class="inner">
<div class="left"><?php include ("left.html") ?></div>
<div class="center">
<div class="bh"><p>this is the body header</p></div>
<?php include ("content.html") ?>
</div>
<div class="right"><?php include ("right.html") ?></div>
<div class="clear"></div>
</div>
</div>
<div class="footer"><?php include ("footer.html") ?></div>
</div>
</body>
From what I can deduce, the methods are similar. The one difference is that the “John” page uses border width and color to define the right and left columns. On the John page I use a relative div and top margin heights to fit the sub header in. So with the John page I do not need an image to fill one of the columns; however, since border width is used for defining the columns, you need to get creative to add the white border to show separation between the various areas.
On the Paul page, I guess you need to just play around with some of the various values to make sure nothing gets lost behind the footer.
Can someone let me know if any of these pages “Blows up more than the other”. I am new to this and I think I have successfully hacked my way through it.
Since both pages have various fixes in them, is one more robust than the other.
BTW...I can send you the CSS files if it makes it any easier.
TIA….Mike


Hi Mike,
Good job there on both those pages.
The problem with the columns not being full length in netscape 7/mozilla is because you have over-ridden the background property here:
The background colour on the html element is over-riding the definition further down the page here:Code:html, body { background-color: #FFF; color: #000; font-family: Arial, Helvetica, sans-serif; margin: 0 0 0 0; padding: 0 0 0 0; }
Either define the bg colour just for the body element and not the html element or add the html element to my definition like so.Code:body { padding:0; margin:0; background:#FFFFCC url(http://www.evolutionmsport.com/test/leftcolblue.jpg) repeat-y left top ; color: #000000; }
There are actually very few hacks at all in my page and so its pretty robust. The hacks that are in there won't affect other browsers and are mainly cosmetic.Code:html, body { padding:0; margin:0; background:#FFFFCC url(http://www.evolutionmsport.com/test/leftcolblue.jpg) repeat-y left top ; color: #000000; }
You could avoid the float drop in the centre column if you used the content first approach as here:
http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm
But it does make it a bit more complicated to work with.
The footer calculations are necessary for the 100% footer which big johns original demo didn't have (although he has borrowed my code for his new demo using 100% height). The clear footer only needs to be as high as the footer itself (or slightly smaller) and this just stops text from going behind it. (The footer code is only needed if you want 100% footer when the page is smaller than 100%.)
The layout has been tested in the browsers mentioned and seems pretty robust. IE5 mac doesn't like the 100% height but apart from that it's pretty good.
Your other page is good also and I think you'll find that the layout is dougs (Douglas Livingstone) who pioneered the technique of using the borders of an element to provide solid colours and then floating the column in the border.(http://www.redmelon.net/tstme/3cols2/noborder.htm)
As you mention this method doesn't allow for any borders on the columns or the centre content which is where my layout scores better but both are useful depending on the situation.
I think the main problems with either layout will be float dropping where large images are used and the content first approach gets around this by putting the centre column first so that if anything drops then it will be a side column.
Hope that helps.
Paul
Edit:
You do realise that the second layout (not mine) doesn't have 100% height? e.g. footer at the bottom of the window unless content is greater when it will sit at the bottom of the document.
Also I notice you have inserted tables into the layout which really rather defeats the purpose of the layout in the firt place lol. You could easily get rid of the tables. You need to tidy that code up a bit as well as it is all <br> everywhere which looks unsightly and is bad practice. Use lists or paragraphs and style them accordingly.
Just thought I'd mention it while I remembered


Paul,
You are right, the other layout is Douglas Livingston's. I was surfing around so much I got confused. So he will get the credit.
I thought I was using your content first page, but I was mistaken. I will try to use the content first page and work the sub-header into it. Now on your layout if I add a 2 px border to say the bottom of 100px header i would just make 102px spacer, right??
Using Doug's layout is hokey when creating the borders between the boxes, and yours makes more sense. I guess there is no way to get around using the repeating image to color one of the columns on your, is there? The only reason I ask is I am trying to set my page up to allow for color themes. Worst case scenario is I could just create a bunch of jpegs with varying color, but it would be easier to enter the hex. Could I nest another div ito one of the columns and use that to color it?
I am not sure what you mean about float drop-down, but i think you are referring to the divs getting flakey once the page is too narrow. I am not overly concerned with that. If the page is that small you shouldn't be reading it.
I also realize that Doug's layout does not fit to 100% of the page. I can go either way on that, but I do like the 100% better.
Let me see if I can fix up your content first page, with my subheader and get all the colors working.
As for the menu bar. I know that needs work. I copied it from a site. It will actually be a drop down menu, but I removed the dropdowns for now. Once I get my this layout strainghtened out I am going to look for a php drop down menu that uses all divs. I think brainjar.com has a decent one.
My content areas will be driven by a variable, the left menu will be dynamically generated with a php script and the subheader will have a breadcrumb script i wrote in it.
Then I will attack the home page which will have a 3 column layout nested into 2 columns. I have a working copy I can post later tonight if you are interested.
Again, thanks for all of your help.
Mike


Paul,
I modified your "content first" layout and came up with this:
http://www.evolutionmsport.com/test/paul1.php
It looks nice, but there is still the issue of a repeating image for the color, but then again the content does come first. I think I also fixed the column color issue, per your instruction. I added the subheader stuff but dont quite understand it. I get the general gist of it, but when you size the window it flickers a little. At this point I am pretty pleased with everything. I just want to put a minimom width hack into it.
I also modified the latest version of Doug's page and came up with this:
http://www.evolutionmsport.com/test/doug.php
I added a 100% height to the Wrapper class and it seems to fill the page, but I am not sure it is that simple. It seems to display properly in mozilla and IE. I also added a subheader similar to the one in your page, but I simplified it a bit. This page needs no images for color, but the content does not come first. I tried to edit it, but I am having trouble floting one of the divs.
Nevertheless, this is where I am at. I will probably post the pages on a testing board to hash out any problems. From what I can see I have to decide whether content first is better than no image dependency on color. Unless I could modify Dougs page to have content first.
Thanks....Mike



Hi Paul
I launched (less than an hour ago) the (significantly) revised css site creation tool that makes the css page layout for the user, if they want a 2 or 3 column design with header and footer.
It was made with considerable help from Big John, you and Allan Smith (thanks guys).
Find the link toward the bottom of this page (but please read the notes first):
[edit: new address]
http://209.216.241.33/ctindex.php
I've posted a separate thread asking for folks to give it a go and see if it works
Trevor
Last edited by ClevaTreva; May 19, 2004 at 04:10.


HI Mike,
The 100% height is not as simple as that and in fact you are not getting 100% height as the page will collapse smaller if content is less than 100% high. You need to read the explanation on my site about 100% as it is fully documentedhow to achieve it. Basically set html,body to 100% and then set outer to 100% with min-height 100% and then the auto hack for moz.I added a 100% height to the Wrapper class and it seems to fill the page, but I am not sure it is that simple. It seems to display properly in mozilla and IE
You are also getting a horizontal scrollbar in dougs layout in firefox but thats something you've added and nothing wrong with his layout. (I haven't had time to look for it but it will be a width thats overflowing and should be easy enough to find.)
Both layouts look fine to me and I don't think there's much to choose between them in this situation. I'm sure dougs layout could be changed to content first by floating the elements in the same way as my demo. The basics of it are to wrap the centre and left floats in an outer wrapper that is floated left and the centre content is floated right inside it and the left floated left. The far right column is then just floated right outside the wrapper.
I didn't really notice much flicker in my layout but you may want to mess around with adding a negative right margin to the left and right floats (for ie only e.g. * html #left (margin-right:-3px). This is a fix for the extra padding ie has on floats and may be causing the page to display incorrectly. (It's just one of those play around and see situations.)
You may also want to look at Trevors link above which has a whole bunch of solutions to the same problems (and it does it all for you.
Hope that helps anyway.
Paul


Hi,
Great work TrevorOriginally Posted by trevor
I've had a quick look and it looks excellent. I'll have a play around with it later But I'm sure it will work fine with the amount of time you've put into this
.
Paul


Paul,
I was looking at trevors generator, it is full of nice comments. I will look into this a little later. I have also had a chance to look at both my pages in a few more browsers.
Both pages have the subheader offset to the right in IE 5.5. In Netscape 7.0 and 7.1 the subheader is offset to the left and covering the left column of the Paul Layout. I am thinking I may have just transcribed something incorrectly.
I was messing with the content first on the doug page but it just got too late. I also noticed the Doug page does not expand to the full height as I have it now. I will look into your CSS and see if I can apply it to dougs page. Then I will move on to find a nice drop down menu.
Thanks again for the comments...
Mike


Hi Mike,
I haven't got time to check at the moment but in the original demo I did for you I had to give moz a different slice of code to IE. I wonder if you've missed that out subsequently. (Have a look at the subheader link post somewhere above this).in IE 5.5. In Netscape 7.0 and 7.1 the subheader is offset to the left and covering the left column of the Paul Layout.
I would think that ie5 would have problems with my original solution and may need hacking. The problem is the adding of padding to the 100% element which ie5 and 5.5. will add inside the element due to their broken box model.
I'm out this evening so it will have to wait until tomorrow before I get around to checking ie5 and 5.5. but i'm sure the probplem will be the broken box model in those browsers.
Paul


Yeah I figure it was something like that. I am not overly concerned with IE 5.5, but I will try to get it to work. Even if it is offset to the right the page is still OK, its not horribly broken.Originally Posted by Paul O'B
Thanks...Mike


Hi Mike,
As expected the broken box model of ie5 and 5.5. stops the subheader from working properly.
It could be fixed for them but would need a handful of hacks. You could add a float in the subheader div and float it left with a negative margin and this would give you the extra width into which you place an absolutely placed element.
You would then need to hide the appropriate code from ie6 (and vice versa ie5) which you could do with the backslash hack.
You would probably have to loose the white border on the bottom though.
If you want the code for this let me know (but it won't be that pretty lol).
Paul


Paul,Originally Posted by Paul O'B
I may need the code. I am still wrestling with the subheader. In a perfect world I would like it to span both the center and the right columns. If you fill the subheader with text it wraps at the edge of the center column. I can live with this, but I am trying to get it to wrap at the edge of the right column.
Maybe I can get this straight over the next day or so.
Thanks....Mike


Hi Mike,
You could just stretch the subinner like this:If you fill the subheader with text it wraps at the edge of the center column
It's not perfect but worksCode:* html #subinner { position:absolute; left:0; top:0; width:122%; height:60px; overflow:hidden; }
I was just going to look at the ie5 problem again so I'll get back to you.
Paul


Hi Mike,
This code will make ie5 look better but I'm not really happy with it.
html:Code:/*##########################*/ * html #subheader { background:#ffffcc; border-bottom:2px solid #fff; height:60px; margin-right:-155px; float:right; width:100%; position:relative; padd/ing-left:157px; display:inline; } html>body #subheader { background:#ffffcc; border-bottom:2px solid #fff; height:60px; left:0px; position:absolute; right:-151px; overflow:hidden; } * html #subinner { position:absolute; left:0; top:0; width:500%; w/idth:122%; height:60px; overflow:hidden; } html>body #clearsub {height:64px} * html #ie5fix { float:left; position:relative; width:157px; background:#ffffcc; height:60px; margin-left:-157px; display:inline; d/isplay:none; } * html #clearsub {clear:both}
With your layout you may be better off loosing the 100% height and then all your headers can have fluid heights instead of being fixed height and overflow:hidden. It all depends what you put in the headers I suppose.Code:<div id="subheader"> <div id="ie5fix"> <div id="subinner">Sub Header </div> </div> </div>
Hope this gives you some ideas anyway.
Paul
Bookmarks