Grow your CSS skills. Land your dream job.

Middle Column content moves to left

  • # November 26, 2009 at 11:55 pm

    I have a three column website, using Expression Engine. My problem is that my middle column comments area is moving underneath the left side sidebar whenever the middle column articles is long or has many photos. The content and photos themselves stay where they belong in the middle, but the comments don’t stay in the center and move left underneath the sidebar.

    You can see this here:
    http://www.east-harlem.org/index.php/News/view/east_harlem_website_update/

    Here is the code as Expression Engine has it (it is less code than looking at the source):

    Code:
    {embed=”/includes/header2″ title=”{exp:weblog:entries weblog=”News” limit=”1″ status=”open”}{title}{/exp:weblog:entries}”}

    {exp:weblog:entries weblog=”News” limit=”1″}


    {title}

    By {author}


    {article_body}
    {/exp:weblog:entries}

    {exp:comment:entries weblog=”news”}

    Posted by {name} {comment_date format=”%F %d, %Y”}

    {comment}

    {/exp:comment:entries}

    Reader Discussion: Comment on this News Article.
    You must be a registered member to Login, see the comments form, and be able to post comments.

    We welcome your comments on this news story. Please complete the form to the left to add to the conversation.

    Please Note: East Harlem.com reserves the right to edit or remove any comment that is deemed inappropriate, off-topic or otherwise violating the Terms of Service of the East Harlem.com website.

    Thank you for participating in the public dialogue!

    {if logged_in}
    {exp:comment:form}




    {/exp:comment:form}
    {/if}

    {embed=”/includes/footer”}

    Here is the pertinent comment code:

    Code:
    /* ARTICLE COMMENTS */

    #comments
    { width: 500;
    }

    #comments h6, #comment-form h6 {
    font-family: Arial, sans-serif;
    text-transform:uppercase;
    /* border-bottom:1px solid #aaa;*/
    font-size:11px;
    font-weight:normal;
    letter-spacing:1px;
    padding-bottom:5px;
    margin:25px 0 0 0;
    }

    #comments dl {
    padding:0;
    margin:0;
    }

    #comments dl dt {
    font-family: Arial, sans-serif;
    font-size:10px;
    text-transform:uppercase;
    }

    #comments .comment-date {
    float:right;
    font-family: Arial, sans-serif;
    font-size:11px;
    }

    #comments .posted-by {
    text-transform:none;
    }

    #comments dl dd {
    margin:15px 0 0 0;
    font-size:14px;
    line-height:18px;
    }

    #comments .comment-content {
    margin-bottom:15px;
    width:75%;
    padding:15px;
    }

    #comments .even {
    background-color:#eee;
    }

    #comment-form {

    }

    #comment-form h6 {

    }

    fieldset#comment-form-field {
    background-color:#eee;
    border:1px solid #ccc;
    margin:25px 0 25px 0;
    padding:10px 0 10px 25px;
    }

    fieldset#comment-form-field label {
    font-size:12px;
    font-family: Arial, sans-serif;
    color:#111;
    }

    form#comment-form-form {
    float:left;
    width:50%;
    clear:left;
    }

    #disclaimer {
    float:right;
    width:35%;
    clear:left;
    margin:30px 35px 0 0;
    }

    #disclaimer p {
    font-family: Arial, sans-serif;
    font-size:11px;
    padding-left:15px;
    }

    I want the comments to stay the same width as the articles, not go left or right, or expand both to the left and right. Any help by anyone on this would be appreciated.

    # November 28, 2009 at 2:22 pm

    Explanation: When you float columns, they are "taken off the page" as far as most outside elements are concerned. Only other floated elements will be able to bump up against it.

    So your center column needs to act like the two floated columns don’t exist.

    What you need to do is have one <div> to outline each of your columns. You currently have a content div and a comments div that are fending for themselves. Put your comments div INSIDE your content div. Anything that goes in that center column, should be put into that content div.

    I hope that helps.

    # December 5, 2009 at 4:13 pm

    Ashton, thanks for your reply. I have been looking at it since and moved the comments div inside the content div. I have looked over my code and see the Navbar Div contains all of the elements of the left column as it should. The Headlines Div contains all of the elements of the right column and now the Contents div contains all of the elements of the middle column.

    But since putting the Comments Div inside the Content Div, the Comments Div still spills out underneath both left and right column whenever the regular contents of the Contents Div are long enough to make it happen. The middle column contains a new article followed by any posted comments and then a comment form which allows readers to add their comments. Depending on the size of the article, the comments and or the comments form spill out underneath the left and or the right column. At this point I am beginning to miss tables and wish to scream at whoever created this inexact way to position elements on a page. I hate floating at this point. I have spent over two weeks trying to get this right and may just go back to tables to get it done and to have my site up and running. Like, who has the patients for this?!

    Putting the comments under the Contents Div should have done the trick. As the Contents Div should have behaved like a wrapper of sorts. But it seems that in my universe things don’t happen as they should. Please check out these pages to see what is happening:

    http://www.east-harlem.org/index.php/News/view/new_girls_prep_school/ – Comments take up both sides

    http://www.east-harlem.org/index.php/News/view/east_harlem_website_update/ – Footer shrinks to size of Content Div. Why does this happen? Weird huh.

    http://www.east-harlem.org/index.php/News/view/cab_ride_from_hell/ -Part of comment goes right, then expands to both sides.

    What to do. I bet that whatever is going wrong is creating all these effects.

    Here is the html for the view page:

    Code:
    {embed=”/includes/header2″ title=”{exp:weblog:entries weblog=”News” limit=”1″ status=”open”}{title}{/exp:weblog:entries}”}

    {exp:weblog:entries weblog=”News” limit=”1″}


    {title}

    By {author}


    {article_body}
    {/exp:weblog:entries}


    {exp:comment:entries weblog=”news”}

    Posted by {name} {comment_date format=”%F %d, %Y”}

    {comment}

    {/exp:comment:entries}

    Reader Discussion: Comment on this News Article.
    You must be a registered member to Login, see the comments form, and be able to post comments.

    We welcome your comments on this news story. Please complete the form to the left to add to the conversation.

    Please Note: East Harlem.com reserves the right to edit or remove any comment that is deemed inappropriate, off-topic or otherwise violating the Terms of Service of the East Harlem.com website.

    Thank you for participating in the public dialogue!

    {if logged_in}
    {exp:comment:form}




    {/exp:comment:form}
    {/if}

    {embed=”/includes/footer”}

    As far as I can see all is correct. Each div has a closing /div. What to do?

    # December 5, 2009 at 4:46 pm

    I have put all the comments and comment form elements inside the feature div and it seems to be doing what I want. Feature div has the following properties:

    Code:
    .feature{
    padding: 0px 0px 10px 10px;
    font-size: 85%;
    }

    Check out the before mentioned pages now.

    http://www.east-harlem.org/index.php/News/view/east_harlem_website_update/ – everything ok, perfect. Except the footer which is now the same width as the Content area. Why is this?

    http://www.east-harlem.org/index.php/News/view/new_girls_prep_school/ – looks like it has creeped left a bit. I added a comment and all is well. Interesting.

    http://www.east-harlem.org/index.php/News/view/shona_crafts_from_congo2/ – Perfect!

    I now notice that if an article has a comment posted it will format right. Hmmmm. Interesting. I must look at the formatting for the comments themselves for a clue.

    # December 5, 2009 at 5:16 pm
    "Josebr" wrote:
    http://www.east-harlem.org/index.php/News/view/east_harlem_website_update/ – everything ok, perfect. Except the footer which is now the same width as the Content area. Why is this?

    Because the Footer (#siteInfo) is is inside the .feature which is inside the #content div.

    "Josebr" wrote:
    http://www.east-harlem.org/index.php/News/view/new_girls_prep_school/ – looks like it has creeped left a bit. I added a comment and all is well. Interesting.

    Nope. That is 10px from the left. You have a comment box inside some other pages which are adding some additional padding/margin.

    "Josebr" wrote:
    http://www.east-harlem.org/index.php/News/view/shona_crafts_from_congo2/ – Perfect!

    I now notice that if an article has a comment posted it will format right. Hmmmm. Interesting. I must look at the formatting for the comments themselves for a clue.

    It sounds like your <div>s are sloppy. Every time you open a Div, you must close the div (at the correct place) or it will mess up the content following it. I would recommend making sure that every Loop has the open and close inside the loop (so fifteen comments doesn’t open 15 divs, and doesn’t close them.

    I also recommend validating all of your pages:
    http://validator.w3.org/check?verbose=1 … _update%2F

    # December 5, 2009 at 6:31 pm

    Thanks again, I have eliminated some errors using the link you gave. I have used validation before, but it only validated the css and not the xhtml or html. So thank for showing me that page. I will be using it a lot.

    Some of the errors I can not correct. Expression Engine creates some of the entries and formats them out of my control, such as putting a <p> inside at <dt>. In fact most (80%) of the errors on the page are Expression Engine created errors via the way its tags do things. So I can not correct those. The actual page has a lot less code. What Epxression engine does is generate code off the data base input I give it.

    Here is the actual page as coded:

    Code:
    {embed=”/includes/header2″ title=”{exp:weblog:entries weblog=”News” limit=”1″ status=”open”}{title}{/exp:weblog:entries}”}

    {exp:weblog:entries weblog=”News” limit=”1″}


    {title}

    By {author}


    {article_body}
    {/exp:weblog:entries}


    {exp:comment:entries weblog=”news”}

    Posted by {name} {comment_date format=”%F %d, %Y”}
    {comment}

    {/exp:comment:entries}

    Reader Discussion: Comment on this News Article.
    You must be a registered member to Login, see the comments form, and be able to post comments.

    We welcome your comments on this news story. Please complete the form to the left to add to the conversation.

    Please Note: East Harlem.com reserves the right to edit or remove any comment that is deemed inappropriate, off-topic or otherwise violating the Terms of Service of the East Harlem.com website.

    Thank you for participating in the public dialogue!

    {if logged_in}
    {exp:comment:form}




    {/exp:comment:form}
    {/if}

    {embed=”/includes/footer”}

    The embeds are exactly that, embeded/included code which is used over and over on different pages and makes it easier to make site wide changes by changing just one thing on the include. The weblogs also generate code based on the database input.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".