473,322 Members | 1,644 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 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 1819
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

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

Similar topics

9
by: Don Grover | last post by:
I have a HTML table created using ASP as a web page. ie. HEADING1 HEADING2 HEADING3 etc... data 1 data2 data3 etc and so on How can I toggle hide /...
0
by: Sean Givan | last post by:
I'm putting together a page layout, and I'm getting frustrated trying to recreate a setup that I had made before, but forgotten exactly how. The page is a table with two columns; the left is a...
8
by: Zak McGregor | last post by:
Hi all I have a simple 3 column css layout here: http://www.carfolio.com/newlook.dhtml However, when the centre column is wider than the screen (yes, it does happen on some pages on the site...
5
by: Matt Bostock | last post by:
Hi, I'm a bit of a CSS newbie so please accept my apologies if this post is inappropriate. I can't get the 'latest news' title to move across to the right column where it belongs. Here's a...
24
by: Mike Otten | last post by:
Any help greatly appreciated. The validated page is at: http://myweb.stedwards.edu/michaelo/ddtab.htm The trouble is with the radio buttons (2/3-down the left column). The radios are...
9
by: Xavier van Unen | last post by:
Hi guys and gals, I'm working on a 2 column CSS layout (for an ordering system) in which it isn't a priori known which of the two columns will be the longest, that depends on the (script...
4
by: Veerle | last post by:
Hi, I'm working on a new layout for my website. Each page consists of two parts: - a menu (left part of the page) - the content (the remaining part at the right) So I created two divs, set...
3
by: hzgt9b | last post by:
I want a page with a centered div containing two rows. Top row has an image and some text. The bottom row needs to have three columns. I'd love to have the 1st column set to a fixed width then have...
1
Death Slaught
by: Death Slaught | last post by:
I will be showing you how to make a very simple but effective three column layout. First we will begin with the HTML, or structure, of our three column layout. <!DOCTYPE html PUBLIC...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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.