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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Location
    atlanta
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need to make equal columns in a template design

    I'm going to try to be as concise and informative as possible.

    I build templates that have to flow around whatever our clients put in. I can't use set heights. I was taught, by the company, to build tables, but in the last two years have been working to move us to CSS styling. (As I teach myself how to do it at the same time.)

    I have a template that we made live that needed an equalheights jquery plugin to make the columns work. However, we recently discovered that the page is broken when the "Additional Search Criteria" is clicked as it opens up an additional area and the page doesn't adjust for it.

    You can see the live example here:
    http://www.pahomesforsale.com/engine...5/residential/

    On our dev site, I have tried to change things so that the page works with CSS alone and without using the plugin. However, I can't get the columns to fill the space correctly. (Which is why I went looking for an answer and came up with the plugin.)

    Broken Page: http://dev.pahomesforsale.com/login/

    I have gone to several people and have not been able to get help. I've tried to fix this problem for 4 days, searching for suggestions and trying different tactics. I'd really love a way to make this page work with just CSS. And since the client has already approved the design (and so far does not know about the bug) I can't do a redesign.

    Thanks for your help.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    hmm when I remove the fixed height for inside_container div, then it seems to work. Have you tried and tested that?
    Teed

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Location
    atlanta
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Do you mean inside_content? That does not have a fixed height in the CSS.
    I'm not seeing it in the html either. Can you clarify?

    #inside_content{
    width:820px;
    margin: 0;
    float:left;
    background-color:#ffffff;
    }

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Its an inline style you specified:

    Code:
    <div class="columns" id="inside_content" style="height: 750px;"><div style="margin: 10px;">
    That works as far as fixing your box model issue, but I think it causes another issue. Try it and see what happens.
    Teed

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    If you're looking for a pure css solution to setting equal column heights, there are some really good examples here.

    If you want a javascript soultion to setting equal column heights, I use this as a model.


    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                ul {
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 0px;
                    list-style-type: none}
                #container {
                    border: 1px solid red;
                    width: 800px;
                    overflow: hidden;
                    margin: 0px auto 0px auto;
                    padding: 20px 20px 20px 20px}
                /* sidebar's and content's top and bottom padding values must be the same */
                #sidebar {
                    margin: 0px 0px 0px 0px;
                    padding: 10px 10px 10px 10px;
                    border: 1px solid green;
                    float: left;
                    width: 250px}
                #content {
                    margin: 0px 0px 10px 0px;
                    padding: 10px 10px 10px 10px;
                    border: 1px solid blue;
                    float: right;
                    width: 490px}
                #content div {
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 70px 0px;
                }
            </style>
            <script type="text/javascript">
                window.onload=function() {
                    var maxHeight = 0;
                    //get the column containers
                    var colsA = document.getElementById("container").childNodes;
                    //get the height of the tallest column
                    for(var i=0; i < colsA.length; i=i+1) {
                        if(colsA[i].clientHeight > maxHeight) maxHeight = colsA[i].clientHeight;
                    }
                    //set all the column containers heights to maxHeight
                    for(var i=0; i < colsA.length; i=i+1) {
                        if(colsA[i].nodeType == 1) colsA[i].style.height = maxHeight+'px';
                    }
                }
            </script>
        </head>
        <body>
            <div id="container">
                <div id="sidebar">
                    <ul id="menu_list">
                        <li>Menu item 1</li>
                        <li>Menu item 2</li>
                        <li>Menu item 3</li>
                        <li>Menu item 4</li>
                    </ul>
                </div>
                <div id="content">
                    <div>
                        Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
                        Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
                        pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
                        ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id,
                        aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor,
                        volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec
                        ante sed, ac turpis dis dui vestibulum aut.
                    </div>
                </div>
            </div>
        </body>
    </html>

  • Users who have thanked bullant for this post:

    ldraper (03-01-2011)

  • #6
    New to the CF scene
    Join Date
    Feb 2011
    Location
    atlanta
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Are you looking at the www version or the dev one?
    The plugin puts a height on these areas after the page loads.

    The actual code looks like this:

    <div id="inside_content" class="columns">
    <div style="margin: 10px;"><xsl:apply-templates select="page"/></div>
    </div>

  • #7
    New to the CF scene
    Join Date
    Feb 2011
    Location
    atlanta
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'll be reading through the CSS options.

    As to the javascript solution, I know very little about java script, but will it adjust the page is something opens and the page becomes longer after the page has loaded?

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by ldraper View Post
    Are you looking at the www version or the dev one?
    The plugin puts a height on these areas after the page loads.

    The actual code looks like this:

    <div id="inside_content" class="columns">
    <div style="margin: 10px;"><xsl:apply-templates select="page"/></div>
    </div>
    I'm looking at your source code the browser renders. True, the jQuery plugin may be adding that height attribute to your div.

    Have you looked through the jQuery code then? This may be a topic for the jQuery/javascript forum.
    Teed

  • #9
    New to the CF scene
    Join Date
    Feb 2011
    Location
    atlanta
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I was referring to the fact that I pasted two links. One with a www address which is the live site.

    The page on our development server has this address: http://dev.pahomesforsale.com/login/

    This dev one is not using the plugin and I was hoping to fix this with just css so that I don't have to use the plugin.

    As for looking through the jquery code, I have looked through it in a general way, but I know very little about jquery. Unfortunately, the only way I can think of to change things would be to alter the way the search page functions. (So that when you click the link, it runs the equalheights plugin again.) This is not something my developers would want me to do.

    I really appreciate your reviewing the issue for me.

  • #10
    New to the CF scene
    Join Date
    Feb 2011
    Location
    atlanta
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Bullant!
    I'd been set on the idea of making the two columns with background colors rather than images (as I have been working to limit the number of images our templates call). But looking over your examples, made me see that I could have a small image with the two background colors for the content_area, and then use no background for the navigation and the content.

    Once I changed how I thought about the area, the solution seemed so simple.


    Luciann


  •  

    Tags for this Thread

    Posting Permissions

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