SitePoint Sponsor

User Tag List

Results 1 to 23 of 23

Thread: column height

  1. #1
    SitePoint Member
    Join Date
    Jan 2004
    Location
    /home/spaz
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    column height

    if you go to http://0.lame-***.com
    with *** being a three letter word for the thing youre sitting on now,
    youll see my 3 column css layout

    im having issues with column heights

    im looking to have every column extend to the length of the longest column
    now, it only extends to as long as it needs to be

    also:

    i have another two elements the bottom, and copyright

    as of now, the bottom and copyright are only pushed down as far as the middle(main) column goes

    the right doesnt push it down, it just overlaps it

    how would i fix all of this?

  2. #2
    SitePoint Member
    Join Date
    Jan 2004
    Location
    /home/spaz
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone?

  3. #3
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Spaz,

    You might look at this link from Paul O'Brien who is pretty proficient in this area. You might find the answer. Wish I could be more help.

    http://www.pmob.co.uk/temp/3colfixedtest_4.htm


    John

  4. #4
    SitePoint Member
    Join Date
    Jan 2004
    Location
    /home/spaz
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ive been staring at that all day, but to no avail
    its very different from the code im using,
    and ive only been using css since 8 this morning

    would someone mind taking a look at my code itself?

    Code:
    /*--------------------------------*/
    body{
    	margin: 0px 0px 0px 0px;
    	padding:0px;
    	color: #000000;
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 12px;
    	text-align: justify;
    	background-color: #ffffff;}
    
    /*--------------------------------*/
    
    p,h1,pre,img{
    	margin: 5px 5px 5px 5px;}
    
    /*--------------------------------*/
    
    img{
    	border: 0;}
    
    /*--------------------------------*/
    
    a:link{
    	text-decoration: none;
    	font-weight: bold;
    	color: #94343B}
    a:visited{
    	text-decoration: none;
    	font-weight: bold;
    	color: #94343B}
    a:hover{
    	text-decoration: none;
    	font-weight: bold;
    	color: #30339B}
    a:active{
    	text-decoration: none;
    	font-weight: bold;
    	color: #30339B}
    
    /*--------------------------------*/
    
    .button{
    	font-size: 12px;
    	font-family: verdana, arial, helvetica, sans-serif;
    	color: #000000;
    	background: #ffffff}
    
    /*--------------------------------*/
    
    .title{
    	font-weight: bold;
    	font-size: 14px;
    	letter-spacing: 1px;
    	color: #000000}
    
    /*--------------------------------*/
    
    .subtitle{
    	font-weight: bold;
    	font-size: 12px;
    	letter-spacing: 1px;
    	color: #000000}
    
    /*--------------------------------*/
    
    #main p,h1,pre{
    	padding: 10px 10px 5px 10px;
    	margin: 0px;}
    
    /*--------------------------------*/
    
    #copyright a{
    	text-decoration: none;
    	color: #000000}
    #copyright a:visited{
    	text-decoration: none;
    	font-weight: normal;
    	color: #000000}
    #copyright a:hover{
    	text-decoration: none;
    	color: #000000}
    #copyright a:active{
    	text-decoration: none;
    	font-weight: bold;
    	color: #000000}
    
    /*--------------------------------*/
    
    #top_left{
    	padding: 5px 5px 0px 0px;
    	margin: 0px;
    	height: 53px;}
    
    /*--------------------------------*/
    
    #top_right{
    	position: absolute;
    	top: 27px;
    	left: 340px;}
    
    /*--------------------------------*/
    
    #left{
    	position: absolute;
    	top: 74px;
    	left: 0px;
    	width: 215px;
    	background-color: #eeeeee;
    	border-top: 1px solid #000000;
    	border-right: 1px solid #000000;
    	border-bottom: 1px solid #000000;}
    
    /*--------------------------------*/
    
    #main{
      	margin-left: 216px;
      	margin-right: 166px;
    	border-bottom: 1px solid #000000;}
    
    /*--------------------------------*/
    
    #right{
    	position: absolute;
    	top: 74px;
    	right: 0px;
    	width: 165px;
    	background-color: #eeeeee;
    	border-top: 1px solid #000000;
    	border-left: 1px solid #000000;
    	border-bottom: 1px solid #000000;}
    
    /*--------------------------------*/
    
    #bottom{
    	border-bottom: 1px solid #000000;}
    
    /*--------------------------------*/
    
    #copyright{
    	bottom: 0px;	
    	font-size: 10px;
    	font-family: verdana, arial, helvetica, sans-serif;
    	color: gray;
    	letter-spacing: -1px}
    
    /*--------------------------------*/

  5. #5
    SitePoint Member
    Join Date
    Jan 2004
    Location
    /home/spaz
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok,

    assuming this layout:

    Code:
    top div
    
    container div
    
    left div
    main div
    right div
    
    /container div
    
    bottom div
    copyright div
    when i set the body, container, left, right, and main divs to height: 100%;,
    they extend to a fixed length
    my interpretation of 100% is the full length of the div, not a fixed height

    this is viewable at http://0.lame-***.com/index1.php

    perhaps im still thinking too much in terms of tables...

    ideas?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    perhaps im still thinking too much in terms of tables...
    Yes, that's the problem you've picked the type of layout that is suited to tables.

    As pointed out by John above the thread he linked to does explain the issues needed to acquire 100% height.

    my interpretation of 100% is the full length of the div, not a fixed height
    Have a look here for an explanation oif 100% that I did for a thread earlier today:

    http://www.sitepoint.com/forums/showthread.php?t=150517

    The easiest method in your page is to use 2 background images for your fixed column colours and in that way the color will always extend.

    I will have a quick look at your page and see if there's any problems with this.

    Paul

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here's what I think you are trying to do:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>lame-***.com</title>
    <style type="text/css">
    /*--------------------------------*/
    html,body {height:100%}
    body{
     margin: 0px;
     padding:0px;
     color: #000000;
     font-family: verdana, arial, helvetica, sans-serif;
     font-size: 12px;
     text-align: justify;
     background-color: #eeeeee;
    }
    /*--------------------------------*/
    p,h1,pre,img{
     margin: 5px 5px 5px 5px;}
    /*--------------------------------*/
    img{
     border: 0;}
    /*--------------------------------*/
    a:link{
     text-decoration: none;
     font-weight: bold;
     color: #94343B}
    a:visited{
     text-decoration: none;
     font-weight: bold;
     color: #94343B}
    a:hover{
     text-decoration: none;
     font-weight: bold;
     color: #30339B}
    a:active{
     text-decoration: none;
     font-weight: bold;
     color: #30339B}
    /*--------------------------------*/
    .button{
     font-size: 12px;
     font-family: verdana, arial, helvetica, sans-serif;
     color: #000000;
     background: #ffffff}
    /*--------------------------------*/
    .title{
     font-weight: bold;
     font-size: 14px;
     letter-spacing: 1px;
     color: #000000}
    /*--------------------------------*/
    .subtitle{
     font-weight: bold;
     font-size: 12px;
     letter-spacing: 1px;
     color: #000000}
    /*--------------------------------*/
    #main p,h1,pre{
     padding: 10px 10px 5px 10px;
     margin: 0px;}
    /*--------------------------------*/
    #copyright a{
     text-decoration: none;
     color: #000000;
     }
    #copyright a:visited{
     text-decoration: none;
     font-weight: normal;
     color: #000000}
    #copyright a:hover{
     text-decoration: none;
     color: #000000}
    #copyright a:active{
     text-decoration: none;
     font-weight: bold;
     color: #000000}
    /*--------------------------------*/
    #top_left{
     position:absolute;
     top:0;left:0;
     width:100%;
     margin: 0px;
     height: 74px;
     background:#fff;
    }
    /*--------------------------------*/
    #top_right{
     position: absolute;
     top: 17px;
     left: 340px;
    }
    /*--------------------------------*/
    #left{ 
     float:left;
     margin-left:-215px;/* must be 1 pixel less than width */
     width: 216px;/* same as margin left on #main */
     position:relative;/* ie won't show float without this */
    }
    #right{ 
     float:right;
     width: 166px;/* same as margin right on #main */
     margin-right:-165px;/* must be 1 pixel less than width */
     position:relative;/* ie won't show float without this */
    }
    #main{ 
     height: 100%;
       min-height:100%; 
     margin-left: 216px;/* space for left column */
       margin-right: 166px;/* space for right column */
     border-left:1px solid #000;
     border-right:1px solid #000;
     background:#fff;
     margin-bottom:-105px;/* space for footer */
    }
    html>body #main{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    /*--------------------------------*/
    /*--------------------------------*/
    #bottom{
     clear:both;
     margin-top:0;
     border-bottom: 1px solid #000000;
     border-top: 1px solid #000000;
     text-align:center;
    }
    /*--------------------------------*/
    #copyright{
     font-size: 10px;
     font-family: verdana, arial, helvetica, sans-serif;
     color: gray;
     padding-top:10px;
     letter-spacing: -1px;
     text-align:center;
    }
    /*--------------------------------*/
    #clearheader{height:74px;width:100%}/*needed to make room for header*/
    #clearfooter{clear:both;height:100px;}/*needed to make room for footer*/
    #lefttopborder, #righttopborder {/* for top border on floats */
     border-top:1px solid #000;
     height:0px;
     overflow:hidden;
    }
    #lefttopborder {width:215px;}
    #righttopborder {width:165px;margin-left:1px;}
    * html #centrecontent {height:1%;}/* combat IE's 3 pixel jog */
    #footer {height:105px;background:#fff;width:100%;}/* make footer a fixed height */
    </style>
    </head>
    <body>
    <div id="top_left"> 
      <p> <a href="/"><img src="http://0.lame-***.com/site_images/logo.gif" alt="logo" /></a> 
      </p>
      <div id="top_right"> 
    	<p> |&nbsp;<a href="/">home</a> |&nbsp;<a href="/pics">pics</a> |&nbsp;<a href="/humor_archive">humor 
    	  archive</a> |&nbsp;<a href="/stuff">stuff</a> |&nbsp;<a href="/contact">contact 
    	  me</a> |&nbsp;<a href="/pages_of_the_past">the link of pages past</a> |&nbsp;<a href="/forum">forum</a> 
    	  |&nbsp; </p>
      </div>
    </div>
    
    <div id="main"> 
      <div id="clearheader"></div>  <!-- to clear header -->
      <div id="left"> 
    	<div id="lefttopborder"></div>
    	<a href="/pics/main/1.jpg"><img style="width: 205px;" src="http://0.lame-***.com/pics/main/1.jpg" alt="Picture of the Period of Time Until I Post Another" /></a> 
    	<p>start left left left left left left left left left left left left leleft 
    	  left left left left left left left left </p>
      </div>
      <div id="right"> 
    	<div id="righttopborder"></div>
    	<p>start right right right right right right right right right right right 
    	  right right right right right right right right right right right right 
    	  right right right right right right right right right right right right 
    	  right right right right right right right right right right right right 
    	  right right right </p>
      </div>
      <div id="centrecontent">	<!--centre content goes here -->
    	<p class="title">1.31.04</p>
    	<p> start main main main main main main main main main main main main main 
    	  main main main main main main main main main last </p>
      </div>
      <div id="clearfooter"></div>  <!-- to clear footer -->
    </div>
    <div id="footer">
      <div id="bottom"> |&nbsp;<a href="/">home</a> |&nbsp;<a href="/pics">pics</a> 
    	|&nbsp;<a href="/humor_archive">humor archive</a> |&nbsp;<a href="/stuff">stuff</a> 
    	|&nbsp;<a href="/contact">contact me</a> |&nbsp;<a href="/pages_of_the_past">the 
    	link of pages past</a> |&nbsp;<a href="/forum">forum</a> |&nbsp; </div>
      <div id="copyright"> 0.0011 seconds of CPU time were wasted rendering this page.<br />
    	Copyright &copy; 2004 <a href="http://www.spazticenterprises.com" target="blank">Spaztic 
    	Enterprises</a>. Don't steal my stuff. <br />
    	&nbsp;<br />
    	<a href="http://validator.w3.org/" target="blank"><img style="width:88px;height:31px" src="http://0.lame-***.com/site_images/valid-xhtml10.png" alt="Valid XHTML 1.0!"  /></a> 
    	<a href="http://jigsaw.w3.org/css-validator/" target="blank"><img style="width:88px;height:31px" src="http://0.lame-***.com/site_images/valid-css.png" alt="Valid CSS!" /></a> 
      </div>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  8. #8
    SitePoint Member
    Join Date
    Jan 2004
    Location
    /home/spaz
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks...but unfortunately i dont have a chance to test that until fridy

    ill get back to you then..

  9. #9
    SitePoint Member
    Join Date
    Jan 2004
    Location
    /home/spaz
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well i lied
    i _did_ have a chance to do this before friday,
    or, rather i made the chance

    paul: you code is beautiful
    obviously, i tweaked it a little, but i only had to make one modification to the layout itself:

    i noticed that with your original code, the borders on the tops of the left and right divs didn't actually touch the end of the page

    so i chaged it to:

    Code:
    #left{ 
     float:left;
     width: 216px;/* same as margin left on #main */
     margin-left:-217px;/* must be 1 pixel less than width */
     position:relative;/* ie won't show float without this */
    }
    #right{ 
     float:right;
     width: 166px;/* same as margin right on #main */
     margin-right:-167px;/* must be 1 pixel less than width */
     position:relative;/* ie won't show float without this */
    }
    #lefttopborder {width:217px;}
    #righttopborder {width:167px;margin-left:1px;}
    my changes were where it says
    where is says " /* must be 1 pixel less than width */ "
    and i also changed the corresponding left/righttopborder sections

    -217 isnt the same as 217

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Glad you found it useful and worked your way around the code

    Paul

  11. #11
    SitePoint Enthusiast jianson's Avatar
    Join Date
    Jul 2001
    Location
    Here and there ...
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately, this implementation is broken in Firebird 0.7, Win2K or at least it is on my machine although it works beautifully in IE6. The footer div appears at the bottom of the center column about an inch or so above the end of the left-hand column.

    I had exactly the same problem on a site I was working on recently but unfortunately wasn't sold enough on the layout to spend a lot of time looking for the fix so have nothing to offer on that front.

    John
    Last edited by jianson; Apr 7, 2004 at 18:25.
    John I'anson-Holton
    Public Speaking

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi John,

    Thanks for that I tested on firebird 0.6.1 and mozilla 1.4 and it seemed to work fine (unless i've missed sopmething like larger resolution etc.)

    I don't have firebird 0.7 but it looks like I'll have to download it for checking. It'll be a pain to cater for different versions of firebird but it might be something simple anyway.

    I'll download firebird 7 later in the week and test as I'm away for a couple of days in afew minutes.

    (looks like I'll have to check my other layouts in Firebird 7 as well ): )

    Paul

  13. #13
    SitePoint Member
    Join Date
    Jan 2004
    Location
    /home/spaz
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow i was just comming back to mention that it does not fork on firebird 0.7, in exactly the same way that john mentioned

    gunna go run downstairs and check it on mozilla 1.4...

    yes, same error

    also, on both browsers, theres a horizontal scrollbar, of what looks to me like 1px width...

    ideas?

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    gunna go run downstairs and check it on mozilla 1.4
    I can't see any problems in Moz 1.4!! I've jut downloaded moz 1.5 and that seems ok (no horizontal scrollbar and footer ok).

    I think I must be missing something . Have you got a link to the page that exhibits these problems?

    I haven't downloaded firebird 7 yet but will do that tomorrow and then I'll test again.

    Paul

  15. #15
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B
    I haven't downloaded firebird 7 yet but will do that tomorrow and then I'll test again.
    0.8 will be out on Monday!

  16. #16
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    0.8 will be out on Monday!
    Off Topic:

    Ooooooooooh! Getting so close to 1.0!
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  17. #17
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Zoef
    Off Topic:

    Ooooooooooh! Getting so close to 1.0!
    Off Topic:

    Except they're 2 months late!
    http://www.mozilla.org/projects/firebird/roadmap.html

  18. #18
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    Off Topic:

    Except they're 2 months late!
    http://www.mozilla.org/projects/firebird/roadmap.html
    Off Topic:

    But isn't that, compared to their counterparts at multi billion dollar companies, at least 10 months early?
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  19. #19
    SitePoint Member
    Join Date
    Jan 2004
    Location
    /home/spaz
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    I can't see any problems in Moz 1.4!! I've jut downloaded moz 1.5 and that seems ok (no horizontal scrollbar and footer ok).

    I think I must be missing something . Have you got a link to the page that exhibits these problems?

    I haven't downloaded firebird 7 yet but will do that tomorrow and then I'll test again.

    Paul
    its all just at

    http://0.lame-***.com

    as soon as the dns change goes through, itll be at

    http://test.lame-***.com

    im still getting the same issues

    i noticed too:
    on the right nav bar, the top border is 1px away from the right border of the center section....

    oh, and
    some of the alignment on the top div is different....

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by john
    Unfortunately, this implementation is broken in Firebird 0.7, Win2K or at least it is on my machine although it works beautifully in IE6. The footer div appears at the bottom of the center column about an inch or so above the end of the left-hand column.

    I had exactly the same problem on a site I was working on recently but unfortunately wasn't sold enough on the layout to spend a lot of time looking for the fix so have nothing to offer on that front.
    Hi John, were you talking about the code I pasted above or the code on spaz's site? I've been going around in circles here lol . Spaz has changed my code and that is why his version is not working.

    The code I pasted above seems to work on all the versions of firebird and mozilla that I've got (moz 1.2, 1.4, 1.5 and firebird 0.6.1).

    If you look at the 3 column link at the top of the forums thread the footer technique has been tried by
    loads of people now and it seems to work very well. (Spaz's layout is slightly different but if you look at my examples you will find that the footer works correctly in the browers specified.)

    Quote Originally Posted by spaz
    i noticed that with your original code, the borders on the tops of the left and right divs didn't actually touch the end of the page

    so i chaged it to:

    Code:

    #left{ float:left; width: 216px;/* same as margin left on #main */ margin-left:-217px;/* must be 1 pixel less than width */ position:relative;/* ie won't show float without this */}#right{ float:right; width: 166px;/* same as margin right on #main */ margin-right:-167px;/* must be 1 pixel less than width */ position:relative;/* ie won't show float without this */}#lefttopborder {width:217px;}#righttopborder {width:167px;margin-left:1px;}

    my changes were where it says
    where is says " /* must be 1 pixel less than width */ "
    and i also changed the corresponding left/righttopborder sections
    I've just noticed what you've done and the above is the source to your problems. (I couldn't access the recent link to your site so I couldn't check if this is what you are still doing).

    The secret to my equalising column layout and footer technique is that the floated column content must overlap the centre content by 1 pixel minimum. This ensures that the footer is pushed down in mozilla etc. In your code above you have moved the floats out of the range needed when all you should have done was move the borders to fit instead.

    This is the reason that you have horizontal scroll bars and the footer doesn't work in mozilla. I've spent about 2 hours checking my layout when I realised it was you layout not mine that wasn't working lol

    If you look at my code here:
    http://www.pmob.co.uk/temp/spaz.htm

    Edit:


    Servers just gone down for 5 hours approx - so try the link later

    I think you'll find that it doesn't exhibit the problems you mentioned and works in mozilla ok as well.

    Quote Originally Posted by Vinnie
    0.8 will be out on Monday!
    Thanks Vinnie I'll wait until Monday


    Paul

    PS :Phew remind me not to take a day off again -I've got a lot of catching up to do
    Last edited by Paul O'B; Feb 6, 2004 at 08:36.

  21. #21
    SitePoint Member
    Join Date
    Jan 2004
    Location
    /home/spaz
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok,

    the site is now at test.lame-***.com, and will soon be moved to www.lame-***.com

    i had three main problems:

    1.) the #eeeeee bar on the bottom:

    i removed the line

    Code:
    padding-top: 10px;
    from my copyright div

    2.) the top borders of the left and right cols and the horizontal scroll on the bottom:

    it now is:

    Code:
    #left{ 
    	float: left;
    	width: 215px;
    	margin-left: -217px;
    	position: relative;}
    
    #right{ 
    	float: right;
    	width: 166px;
    	margin-right: -165px;
    	position: relative;}
    
    #left_top_border, #right_top_border{
    	border-top: 1px solid #000;
    	height: 0px;
    	overflow: hidden;}
    
    #left_top_border{
    	width: 217px;
    	margin-right: 1px;}
    
    #right_top_border{
    	width: 165px;
    	margin-left: 1px;}
    my last problem, the alignment of the image / text on the top_left and top_right divs still displays differently in firebird and ie...

    more to come on that later

    btw

    i _really_ appreciate all of this help

  22. #22
    SitePoint Member
    Join Date
    Jan 2004
    Location
    /home/spaz
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well i still havent figured out the top alignment,
    BUT:

    the right column border is giving me grief:

    if i use

    Code:
    #right{ 
    	float: right;
    	width: 166px;
    	margin-right: -165px;
    	position: relative;}
    #right_top_border{
    	border-top: 1px solid #000000;
    	height: 0px;
    	overflow: hidden;
    	width: 167px;
    	margin-left: 1px;}
    it shows up correctly in firebird, but in ie6 it is bumpped to the left

    and if i use

    Code:
    #right{ 
    	float: right;
    	width: 166px;
    	margin-right: -167px;
    	position: relative;}
    #right_top_border{
    	border-top: 1px solid #000000;
    	height: 0px;
    	overflow: hidden;
    	width: 167px;
    	margin-left: 1px;}
    it shows up correctly in ie6, but in firebird it is bumpped to the right

    ideas?

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You're still making the same mistakes lol

    Copy this code below and you will see the top borders are fine and the columns are perfect and the footer behaves well also.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>lame-***.com</title>
    <style type="text/css">
    /*--------------------------------*/
    html,body {height:100%}
    body{
    margin: 0px;
    padding:0px;
    color: #000000;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    text-align: justify;
    background-color: #eeeeee;
    }
    /*--------------------------------*/
    p,h1,pre,img{
    margin: 5px 5px 5px 5px;}
    /*--------------------------------*/
    img{
    border: 0;}
    /*--------------------------------*/
    a:link{
    text-decoration: none;
    font-weight: bold;
    color: #94343B}
    a:visited{
    text-decoration: none;
    font-weight: bold;
    color: #94343B}
    a:hover{
    text-decoration: none;
    font-weight: bold;
    color: #30339B}
    a:active{
    text-decoration: none;
    font-weight: bold;
    color: #30339B}
    /*--------------------------------*/
    .button{
    font-size: 12px;
    font-family: verdana, arial, helvetica, sans-serif;
    color: #000000;
    background: #ffffff}
    /*--------------------------------*/
    .title{
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
    color: #000000}
    /*--------------------------------*/
    .subtitle{
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 1px;
    color: #000000}
    /*--------------------------------*/
    #main p,h1,pre{
    padding: 10px 10px 5px 10px;
    margin: 0px;}
    /*--------------------------------*/
    #copyright a{
    text-decoration: none;
    color: #000000;
    }
    #copyright a:visited{
    text-decoration: none;
    font-weight: normal;
    color: #000000}
    #copyright a:hover{
    text-decoration: none;
    color: #000000}
    #copyright a:active{
    text-decoration: none;
    font-weight: bold;
    color: #000000}
    /*--------------------------------*/
    #top_left{
    position:absolute;
    top:0;left:0;
    width:100%;
    margin: 0px;
    height: 74px;
    background:#fff;
    }
    /*--------------------------------*/
    #top_right{
    position: absolute;
    top: 17px;
    left: 340px;
    }
    /*--------------------------------*/
    #left{ 
    float:left;
    margin-left:-215px;/* must be 1 pixel less than width */
    width: 216px;/* same as margin left on #main */
    position:relative;/* ie won't show float without this */
    }
    #right{ 
    float:right;
    width: 166px;/* same as margin right on #main */
    margin-right:-165px;/* must be 1 pixel less than width */
    position:relative;/* ie won't show float without this */
    }
    #main{ 
    height: 100%;
    min-height:100%; 
    margin-left: 216px;/* space for left column */
    margin-right: 166px;/* space for right column */
    border-left:1px solid #000;
    border-right:1px solid #000;
    background:#fff;
    margin-bottom:-105px;/* space for footer */
    }
    html>body #main{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    /*--------------------------------*/
    /*--------------------------------*/
    #bottom{
    clear:both;
    margin-top:0;
    border-bottom: 1px solid #000000;
    text-align:center;
    }
    /*--------------------------------*/
    #copyright{
    font-size: 10px;
    font-family: verdana, arial, helvetica, sans-serif;
    color: gray;
    padding-top:10px;
    letter-spacing: -1px;
    text-align:center;
    }
    /*--------------------------------*/
    #clearheader{height:74px;width:100%}/*needed to make room for header*/
    #clearfooter{clear:both;height:100px;}/*needed to make room for footer*/
    #lefttopborder, #righttopborder {/* for top border on floats */
    border-top:1px solid #000;
    height:0px;
    overflow:hidden;
    }
    #lefttopborder {width:217px;position:relative;left:-2px;}
    #righttopborder {width:167px;position:relative;right:-2px}
    html>body #righttopborder {right:-1px}
    * html #centrecontent {height:1%;}/* combat IE's 3 pixel jog */
    #footer {
    height:104px;
    background:#fff;
    width:100%; 
    border-top: 1px solid #000000;
    }/* make footer a fixed height */
    </style>
    </head>
    <body>
    <div id="top_left"> 
    <p> <a href="/"><img src="http://0.lame-***.com/site_images/logo.gif" alt="logo" /></a> 
    </p>
    <div id="top_right"> 
    	<p> |&nbsp;<a href="/">home</a> |&nbsp;<a href="/pics">pics</a> |&nbsp;<a href="/humor_archive">humor 
    	 archive</a> |&nbsp;<a href="/stuff">stuff</a> |&nbsp;<a href="/contact">contact 
    	 me</a> |&nbsp;<a href="/pages_of_the_past">the link of pages past</a> |&nbsp;<a href="/forum">forum</a> 
    	 |&nbsp; </p>
    </div>
    </div>
    <div id="main"> 
    <div id="clearheader"></div>
    <!-- to clear header -->
    <div id="left"> 
    	<div id="lefttopborder"></div>
    	<a href="/pics/main/1.jpg"><img style="width: 205px;" src="http://0.lame-***.com/pics/main/1.jpg" alt="Picture of the Period of Time Until I Post Another" /></a> 
    	<p>start left left left left left left left left left left left left leleft 
    	 left left left left left left left left </p>
    </div>
    <div id="right"> 
    	<div id="righttopborder"></div>
    	<p>start right right right right right right right right right right right 
    	 right right right right right right right right right right right right 
    	 right right right right right right right right right right right right 
    	 right right right right right right right right right right right right 
    	 right right right </p>
    </div>
    <div id="centrecontent"> 
    	<!--centre content goes here -->
    	<p class="title">1.31.04</p>
    	<p> start main main main main main main main main main main main main main 
    	 main main main main main main main main main last </p>
    </div>
    <div id="clearfooter"></div>
    <!-- to clear footer -->
    </div>
    <div id="footer"> 
    <div id="bottom"> |&nbsp;<a href="/">home</a> |&nbsp;<a href="/pics">pics</a> 
    	|&nbsp;<a href="/humor_archive">humor archive</a> |&nbsp;<a href="/stuff">stuff</a> 
    	|&nbsp;<a href="/contact">contact me</a> |&nbsp;<a href="/pages_of_the_past">the 
    	link of pages past</a> |&nbsp;<a href="/forum">forum</a> |&nbsp; </div>
    <div id="copyright"> 0.0011 seconds of CPU time were wasted rendering this page.<br />
    	Copyright &copy; 2004 <a href="#" target="blank">xxxxxxx Enterprises</a>. 
    	Don't steal my stuff. <br />
    	&nbsp;<br />
    	<a href="http://validator.w3.org/" target="blank"><img style="width:88px;height:31px" src="http://0.lame-***.com/site_images/valid-xhtml10.png" alt="Valid XHTML 1.0!" /></a> 
    	<a href="http://jigsaw.w3.org/css-validator/" target="blank"><img style="width:88px;height:31px" src="http://0.lame-***.com/site_images/valid-css.png" alt="Valid CSS!" /></a> 
    </div>
    </div>
    </body>
    </html>
    If you use this above code you should be able to bend it to your liking.

    You must keep the negative margins on the side columns less that the width of the columns and the width of the columns must match the margins on the centre content.

    Hope this helps (my hosts server is still down so you can't see it live which is why I've posted it here.)

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •