473,390 Members | 1,618 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,390 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 1820
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: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

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.