471,610 Members | 1,345 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,610 software developers and data experts.

Trying to get 3 column layout working

219 100+
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.  
Oct 8 '07 #1
12 1601
drhowarddrfine
7,435 Expert 4TB
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.
Oct 8 '07 #2
dmorand
219 100+
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.
Oct 8 '07 #3
drhowarddrfine
7,435 Expert 4TB
IE7 is nine years behind web standards and buggy. Always test in a modern browser first. Then we can adjust for IEs quirks.
Oct 9 '07 #4
dmorand
219 100+
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
Oct 9 '07 #5
dmorand
219 100+
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.  
Oct 9 '07 #6
drhowarddrfine
7,435 Expert 4TB
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.
Oct 9 '07 #7
dmorand
219 100+
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.
Oct 9 '07 #8
dmorand
219 100+
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?
Oct 9 '07 #9
drhowarddrfine
7,435 Expert 4TB
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").
Oct 9 '07 #10
dmorand
219 100+
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.
Oct 9 '07 #11
surbas
1
try this http://xmlci.blogspot.com/2008/01/body-margin0px-padding0px-text.html
Jan 9 '08 #12
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
Jan 9 '08 #13

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

9 posts views Thread by Don Grover | last post: by
reply views Thread by Sean Givan | last post: by
8 posts views Thread by Zak McGregor | last post: by
5 posts views Thread by Matt Bostock | last post: by
9 posts views Thread by Xavier van Unen | last post: by
4 posts views Thread by Veerle | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by MichaelMortimer | last post: by
reply views Thread by CCCYYYY | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.