Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > html css > answers

Trying to get 3 column layout working

Familiar Sight
  
Join Date: Sep 2007
Posts: 221
#1: Oct 8 '07
I'm trying to get a 3 column layout with equal widths. Here is my page:
domosworld.net

I want it so the two gray borders in the middle always extend to the bottom of the page. I have it setup right now to have borders on the right/left of the main content in the middle, but I'm afraid that the right bar might have more content than the middle.

What's the best way to get this to work?

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.  
  3. <html>
  4. <head>
  5.     <title></title>
  6.     <link rel="stylesheet" type="text/css" href="home.css">
  7. </head>
  8.  
  9. <body>
  10.  
  11. <div id="pageContainer">
  12.     <div id="banner">
  13.         <h5>domosworld.net</h5>
  14.     </div>
  15.     <div id="navBar">
  16.              <ul>
  17.                       <li>LINK 1</li>
  18.                      <li>LINK 1</li>
  19.                      <li>LINK 1</li>
  20.                       <li>LINK 1</li>
  21.               </ul>
  22.     </div>
  23.      <div id="rightNavBar">
  24.      <ul>
  25.                  <li>LINK 1</li>
  26.                  <li>LINK 1</li>
  27.                   <li>LINK 1</li>
  28.          </ul>
  29.     </div>
  30.     <div id="content">
  31.              <p> This is my first web page for domosworld.net
  32.              This is my first web page for domosworld.net
  33.              This is my first web page for domosworld.net
  34.              This is my first web page for domosworld.net
  35.              This is my first web page for domosworld.net
  36.              This is my first web page for domosworld.net
  37.              This is my first web page for domosworld.net
  38.              This is my first web page for domosworld.net
  39.              </p>
  40.     </div>
  41.  
  42.     <div class="clear"></div>
  43.  
  44.     <div id="footer">
  45.              <h5>Property of domodesigns &copy; 2007</h5>
  46.     </div>
  47. </div>
  48.  
  49. </body>
  50. </html>
  51.  
Expand|Select|Wrap|Line Numbers
  1. *{
  2.     padding:0;
  3.     margin:0;
  4.     font-size:100%;
  5. }
  6. body{
  7.     font-family:Arial,Verdana,sans-serif;
  8.     color:#666;
  9.     margin:0;
  10.     padding:0;
  11.     /*border:1px solid blue;*/
  12. }
  13. .clear{
  14.     clear:both;
  15. }
  16. #pageContainer{
  17.     margin:1% 10% 0 10%;
  18.     border-left:1px solid #999;
  19.     border-right:1px solid #999;
  20.     border-top:1px solid #999;
  21. }
  22. #banner{
  23.     padding:5px;
  24.     border-bottom:1px solid #999;
  25.     background-color:#036;
  26. }
  27. #banner h5{
  28.     /*padding:1em 0;*/
  29.     font-size:1.5em;
  30.     color:#DDD;
  31. }
  32. #navBar{
  33.     padding:10px;
  34.     float:left;
  35.     /*border:1px solid #CCC;*/
  36. }
  37. #navBar ul{
  38.     list-style-type: none;
  39. }
  40. #rightNavBar{
  41.     padding:10px;
  42.     float:right;
  43.     /*border:1px solid #CCC;*/
  44. }
  45. #rightNavBar ul{
  46.     list-style-type: none;
  47. }
  48. #content{
  49.     /*margin: 10px 15px;*/
  50.     float:left;
  51.     /*width:75%;*/
  52.     padding: 1em;
  53.     max-width: 40em;
  54.     border-left:1px solid #999;
  55.     border-right:1px solid #999;
  56. }
  57. #footer{
  58.     border-top:1px solid #999;
  59.     border-bottom:1px solid #999;    
  60.     background-color:#036;
  61. }
  62. #footer h5{
  63.     font-size:.75em;
  64.     text-align:right;
  65.     color:#DDD;
  66.     padding:.50em .25em;
  67. }
  68.  

drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,577
#2: Oct 9 '07

re: Trying to get 3 column layout working

Before I can work on this, you have a problem with your CSS. You are relying on the property max-width. max-width does not work in IE but does in modern browsers. Therefore, setting it to 40em messes things up in Firefox, Opera, etc. So we must get your markup working in a proper browser before we can hack it for IEs many problems.
Familiar Sight
  
Join Date: Sep 2007
Posts: 221
#3: Oct 9 '07

re: Trying to get 3 column layout working

Quote:

Originally Posted by drhowarddrfine

Before I can work on this, you have a problem with your CSS. You are relying on the property max-width. max-width does not work in IE but does in modern browsers. Therefore, setting it to 40em messes things up in Firefox, Opera, etc. So we must get your markup working in a proper browser before we can hack it for IEs many problems.

It works in IE7 which I was testing on. I'll have to set a width rather than max-width I guess.
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,577
#4: Oct 9 '07

re: Trying to get 3 column layout working

IE7 is nine years behind web standards and buggy. Always test in a modern browser first. Then we can adjust for IEs quirks.
Familiar Sight
  
Join Date: Sep 2007
Posts: 221
#5: Oct 9 '07

re: Trying to get 3 column layout working

Quote:

Originally Posted by drhowarddrfine

IE7 is nine years behind web standards and buggy. Always test in a modern browser first. Then we can adjust for IEs quirks.

Should I be testing in firefox 2.0? That's what I've been using as my primary
Familiar Sight
  
Join Date: Sep 2007
Posts: 221
#6: Oct 9 '07

re: Trying to get 3 column layout working

Ok, I changed my css to use a percentage width rather than use max-width. Is there a better way to achieve what I'm trying to do now that I can't use max-width?

Expand|Select|Wrap|Line Numbers
  1. *{
  2.     padding:0;
  3.     margin:0;
  4.     font-size:100%;
  5. }
  6. body{
  7.     font-family:Arial,Verdana,sans-serif;
  8.     color:#666;
  9.     margin:0;
  10.     padding:0;
  11.     /*border:1px solid blue;*/
  12. }
  13. .clear{
  14.     clear:both;
  15. }
  16. #pageContainer{
  17.     margin:1% 10% 0 10%;
  18.     border-left:1px solid #999;
  19.     border-right:1px solid #999;
  20.     border-top:1px solid #999;
  21. }
  22. #banner{
  23.     padding:5px;
  24.     border-bottom:1px solid #999;
  25.     background-color:#036;
  26. }
  27. #banner h5{
  28.     /*padding:1em 0;*/
  29.     font-size:1.5em;
  30.     color:#DDD;
  31. }
  32. #navBar{
  33.     padding:10px;
  34.     float:left;
  35.     /*border:1px solid #CCC;*/
  36. }
  37. #navBar ul{
  38.     list-style-type: none;
  39. }
  40. #rightNavBar{
  41.     padding:10px;
  42.     float:right;
  43.     /*border:1px solid #CCC;*/
  44. }
  45. #rightNavBar ul{
  46.     list-style-type: none;
  47. }
  48. #content{
  49.     /*margin: 10px 15px;*/
  50.     float:left;
  51.     width:75%;
  52.     padding: 1em;
  53.     /*max-width: 40em;*/
  54.     border-left:1px solid #999;
  55.     border-right:1px solid #999;
  56. }
  57. #footer{
  58.     border-top:1px solid #999;
  59.     border-bottom:1px solid #999;    
  60.     background-color:#036;
  61. }
  62. #footer h5{
  63.     font-size:.75em;
  64.     text-align:right;
  65.     color:#DDD;
  66.     padding:.50em .25em;
  67. }
  68.  
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,577
#7: Oct 9 '07

re: Trying to get 3 column layout working

Quote:

Originally Posted by dmorand

Should I be testing in firefox 2.0? That's what I've been using as my primary

That is a good choice, along with Opera and Safari. But do look at IE at the same time, while validating, to catch IE bugs early in the process.
Familiar Sight
  
Join Date: Sep 2007
Posts: 221
#8: Oct 9 '07

re: Trying to get 3 column layout working

Quote:

Originally Posted by drhowarddrfine

That is a good choice, along with Opera and Safari. But do look at IE at the same time, while validating, to catch IE bugs early in the process.

What's the best way to ensure that my columns are the same width? There are so many annoying nuances when designing. I wish it was easier.
Familiar Sight
  
Join Date: Sep 2007
Posts: 221
#9: Oct 9 '07

re: Trying to get 3 column layout working

Quote:

Originally Posted by dmorand

What's the best way to ensure that my columns are the same width? There are so many annoying nuances when designing. I wish it was easier.

Should I be using javascript to get my columns to have equal length?
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,577
#10: Oct 9 '07

re: Trying to get 3 column layout working

I've never had any problems getting width to be the same. Can you give an example?

Height can be a little tricky but some markup is easier than others. Sometims it's as simple as 'height:100%', remembering that height would be in relation to its parent which is in relation to its parent, and so on.

Other times absolute positioning is the only way, or using trickery (google "faux columns").
Familiar Sight
  
Join Date: Sep 2007
Posts: 221
#11: Oct 9 '07

re: Trying to get 3 column layout working

Quote:

Originally Posted by drhowarddrfine

I've never had any problems getting width to be the same. Can you give an example?

Height can be a little tricky but some markup is easier than others. Sometims it's as simple as 'height:100%', remembering that height would be in relation to its parent which is in relation to its parent, and so on.

Other times absolute positioning is the only way, or using trickery (google "faux columns").

I looked into the faux columns trick, but I don't really want to implement that on my site. I'll just muck around with it. I think I'll just set a fixed height on my left/right columns, and my middle content should generally be longer.
Newbie
  
Join Date: Jan 2008
Posts: 1
#12: Jan 9 '08

re: Trying to get 3 column layout working

try this http://xmlci.blogspot.com/2008/01/body-margin0px-padding0px-text.html
Member
  
Join Date: Jul 2007
Posts: 37
#13: Jan 9 '08

re: Trying to get 3 column layout working

Visit Float Box Layout overview then http://jp29.org/ for a HTML/CSS Validated three column exemplar that functions in all Browsers at different screen resolutions, including PDAs.

BTW, your use of H5 is not semantically correct -- use CSS to set the sizing parameters instead -- check the CSS of the above exemplars (via the W3C CSS Validator) for some ways to accomplish this.

James
Reply

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,510 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved