Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11

Thread: CSS Two columns

  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Two columns

    Hi--
    Newbie question-- I'm doing my first site entirely in CSS. I have a two column page. The first column has a colored background and consists of just navigation. The second column will contain editorial matter that is sometimes longer than the first column. When the story is longer there is a gap between the bottom of the page and the first column. What syntax or tag can I use at the end of that first column to make it stay the same size as the second one, no matter what the length.

    Thanks in advance ans sorry about the newbie question!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello adman4054,
    have a look at faux columns to see how to do that.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello adman4054,
    have a look at faux columns to see how to do that.
    Thanks Excavator!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I have an example that might make it easier. Explains the CSS pretty well...
    see it at http://www.nopeople.com/CSS/equal_length_columns/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Dec 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I dont get it. The navigation for my site is below [++vnav++ is from a cms]. It is contained within these two tags. I need this to have the same length as the column next to it [a total of two columns make up the page] How do I get it to do what I need. Its just a colored background, no image.

    -------------------------------------------
    <div id="leftcol">
    <div id="tabledata">
    <p align="center">&nbsp;</p>
    ++VNAV++

    </div>
    </div>
    --------------------------------------------

    #tabledata {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-TOP: 0px;
    background-color:#999966;
    float: left;
    position: relative;
    width: 125px;
    height:auto;
    display:block;
    color:#0000FF;

    #leftcol {
    float:left;
    margin: 0px;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-TOP: 4px;


    Thanks in advance.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    In that example I posted make the HTML read like this:


    Code:
      <div id=left>
    
    <div id="tabledata">
    <p align="center">&nbsp;</p>
    ++VNAV++
    </div>
    
    </div>
    And add your CSS inside the style tags:
    Code:
     
    #tabledata {
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px; 
    PADDING-TOP: 0px; 
    background-color:#999966;
    float: left;
    width: 125px;
    height:auto;
    display:block;
    color:#0000FF;
    I'm sure things will need tweaked to make them look right but that's a start for you.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Dec 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a million for responding. It didnt work the first time I tried and now my wife and son say I need to take them out to dinner. I'll try it again when I get back. Thanks again!



    Quote Originally Posted by Excavator View Post
    In that example I posted make the HTML read like this:


    Code:
      <div id=left>
    
    <div id="tabledata">
    <p align="center">&nbsp;</p>
    ++VNAV++
    </div>
    
    </div>
    And add your CSS inside the style tags:
    Code:
     
    #tabledata {
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px; 
    PADDING-TOP: 0px; 
    background-color:#999966;
    float: left;
    width: 125px;
    height:auto;
    display:block;
    color:#0000FF;
    I'm sure things will need tweaked to make them look right but that's a start for you.

  • #8
    New Coder
    Join Date
    Dec 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good Morning--
    I appreciate all the help. I'm new to the board, but wont be for long. Very active group willing to help. I have tried the suggestions to no avail. I'm sure Its something I'm doing wrong being so new to css. I have stripped the page of everything except the elements I need to fix and I was hoping someone would take a look at it. The page can be viewed here: http://greatnewspapers.com/gratiot/about/rates.shtml
    The column on the left[navigation] needs to extend down to the footer no matter what the size of the column next to it. The page is managed by a cms [the tags with ++xxxxx+++ are widgets within the cms]. The left nav column is populated by the ++VNAV++ widget and the column next to it is populated by the ++CONTENTS++ widget. Here is the page:

    ++HTMLHEAD++

    <body>
    <div id="contain">

    <div id="headmenu">
    </div>

    <div id="headmenu1">


    </div>


    <div id="leftcol">

    <div id="tabledata">
    <p align="center">&nbsp;</p>
    ++VNAV++
    </div>

    </div>

    <div id="tabledatamenuright">
    <div id="tabledata9">
    ++CONTENTS++



    </div>

    </div>








    <div id="footer">

    </div>





    </body></html>

    I have also attached the appropriate styles:

    #contain {
    width:800px;
    margin-left:auto;
    margin-right:auto;
    PADDING-TOP: 12px;
    padding-right:0px;
    padding-bottom:0px;
    padding-left:0px;

    }
    #headmenu {
    FONT-SIZE: 14px;
    COLOR: #000000;
    FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-TOP: 5px;
    margin-top:0px;
    padding-bottom:5px;
    height: 18px;
    text-decoration:none;
    BORDER-RIGHT: medium none; BORDER-TOP: 1px solid; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;
    background-color:#cccccc;

    }

    #headmenu1 {

    FONT-SIZE: 14px;
    COLOR: #000000;
    FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-TOP: 5px;
    margin-top:0px;
    padding-bottom:5px;
    height: 18px;
    text-decoration:none;
    BORDER-RIGHT: medium none; BORDER-BOTTOM: 1px solid; BORDER-LEFT: medium none; BORDER-TOP: medium none;
    background-color:#cccccc;

    }

    #leftcol {
    float:left;
    margin: 0px;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-TOP: 4px;

    }

    #tabledata {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-TOP: 0px;
    background-color:#999966;
    float: left;
    position: relative;
    width: 125px;
    height:auto;
    display:block;
    color:#0000FF;
    }

    #tabledatamenuright{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-TOP: 0px;
    PADDING-bottom: 0px;
    float:left;
    width: 665px;
    position: relative;
    margin-top: 0px;
    }


    #tabledata9 {
    text-align:center;
    margin: 0px;
    PADDING-RIGHT: 4px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; PADDING-TOP: 5px;
    vertical-align:top;
    position:relative;
    float: left;
    width: 100;
    COLOR: #000000;
    background-color: #ffffff;
    }











    Appreciate the Help!

  • #9
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It looks like you're sizing your blocks in px. If you apply 'position: relative;' to div#contain, and position it's children absolutely (specifying 'bottom: 0;' for div#leftcol), it should work. See here for more on positioning.

  • #10
    New Coder
    Join Date
    Dec 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I apoligize for being so new. I tried what you said, but it just put the nav bar at the bottom with the same size. In order to stretch the nav bar from top to bottom what do I need to do.
    Thanks.

  • #11
    New Coder
    Join Date
    Dec 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    All--
    Thank you for all the help. I ended up using a piece of javascript to make the columns equal. For anybody else that has the same issue I found the script and instructions for its use here:http://www.killersites.com/blog/2006...g-div-heigths/

    The only down side I can see is that if someone has "java" turned off in their browser, the script wouldnt work.

    Thanks again.


  •  

    Posting Permissions

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