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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy 2 column alignment issue?

    I'm trying to use a 2 column layout for Blogger, and everything seems to be fine except when I add content to my left column, the portion on the right has a huge gap at the top (like it's getting forced down because of the left content) -- I'll make notes in the code. Sorry that I don't have an actual example besides the code, also that the Blogger code is included:

    <!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">
    <head>
    <title>The Weeping Willow Diaries</title>
    <$BlogMetaData$>
    <style type="text/css">
    #navbar-iframe {
    height: 0px;
    visibility: hidden;
    display: none;
    }

    body {
    background-image:url('http://i22.photobucket.com/albums/b304/mddelong/pattern_022.gif');
    background-repeat: repeat;
    background-attachment: fixed;
    font-size: 13px;
    font-family: Trebuchet MS, Arial, SunSans-Regular, Sans-Serif;
    color:#4A4A4A;
    padding:0px;
    margin:0px;
    }

    a {
    color: #DB7093;}
    a:visited {color:#DB7093;}
    a:hover {color: #564b47;}
    a:active { color:#000000;
    }

    h1 {
    font-size: 11px;
    text-transform:uppercase;
    background-color: #B3CC99;
    border-top:1px solid #564b47;
    border-bottom:1px solid #564b47;
    padding:5px 15px;
    margin:0px;
    color: #ffffff;
    }

    h2 {
    font-size:13px;
    font-weight: normal;
    font-variant: small-caps;
    padding: 5px 10px;
    margin:0px;
    color: #000000;
    }

    h3 {
    font-size:15px;
    font-style: italic;
    padding: 5px 10 px;
    margin:0px;
    color: #4A4A4A;
    }


    /* ----------container to center the layout-------------- */

    #container {
    width: 800px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    }

    /* ----------banner for logo-------------- */
    #banner {
    background-color: #ffffff;
    text-align: left;
    padding: 0px;
    margin: 0px;
    border-right: 1px dotted black;
    border-left: 1px dotted black;
    border-top: 1px dotted black;
    }

    #banner img {padding:10px 0px;}


    /* -----------------content--------------------- */
    #content {
    background-color: #ffffff;
    padding: 0px;
    margin-left: 200px;
    margin-right: 0px;
    border-right: 1px dotted black;
    padding: 10px 20px;
    }

    div#content {
    min-height:600px;
    height:expression(this.scrollHeight > 600 ? "auto":"600px");
    }


    /* --------------left navi------------- */
    #left {
    float: left;
    background-color: #ffffff;
    width: 200px;
    margin: 0px;
    padding: 10px 10px;
    border-left: 1px dotted black;
    border-right: 1px dotted gray;
    }

    /* -----------footer--------------------------- */
    #footer {
    clear: both;
    margin: 0px;
    padding: 0px;
    text-align: right;
    }
    </style>

    </head>

    <body>

    <div id="container">
    <div id="banner" >
    <img src="http://i22.photobucket.com/albums/b304/mddelong/wwheader.png" border="0" />
    <h1></h1>
    </div>

    <div id="left">
    <h2>Previously...</h2>
    <BloggerPreviousItems>
    <a href="<$BlogItemPermalinkURL$>">
    <$BlogPreviousItemTitle$>
    </a><br />
    </BloggerPreviousItems>
    </div>

    <div id="content">

    <Blogger>
    <h3><BlogItemTitle>
    <$BlogItemTitle$>
    </BlogItemTitle>:</h3>
    <h2><BlogDateHeader>
    <$BlogDateHeaderDate$>
    </BlogDateHeader></h2>
    ***********THE HUGE GAP HAPPENS RIGHT HERE, BETWEEN THE HEADER AND THE POST TEXT****************
    <$BlogItemBody$>

    <h2>Until next (xo!) -
    <$BlogItemAuthorNickname$>.</h2>

    </Blogger>


    </div>

    <div id="footer"><h1></h1>
    <!-- Start of StatCounter Code -->
    <script type="text/javascript" language="javascript">
    var sc_project=1854486;
    var sc_invisible=1;
    var sc_partition=17;
    var sc_security="cae4bbe9";
    </script>

    <script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><a href="http://www.statcounter.com/" target="_blank"><img src="http://c18.statcounter.com/counter.php?sc_project=1854486&java=0&security=cae4bbe9&invisible=1" alt="free webpage hit counter" border="0"></a> </noscript>
    <!-- End of StatCounter Code -->
    </div>
    </div>

    </body>
    </html>

  • #2
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The image of the issue .........


  • #3
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    try adding float:left; to your #content

  • #4
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That didn't quite work, now it's like this -- still the huge gap at the top.


  • #5
    New Coder
    Join Date
    Mar 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try looking this over. I can't see any differences between this, which works, and yours. You might though.

    http://www.glish.com/css/9.asp

    do you think that it might not be a problem with the css, but with the blog code? I have never used anything like that, and I am not an expert but I cannot find anything wrong with what you have.

  • #6
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've checked and re-checked, myself, as well, and I couldn't find anything... which did leave me to believe it was Blogger. But I've entered the code and deleted it and done it in its most basic form several times and it still happens.. I thought it was some issue of the right content moving down to where the left content ends (which IS the case, but I wasn't sure how to fix that)...

    Does it have to do with min-height? There is min-height code under content... or is there some sort of top vertical align that would work? I did try something like that and it did nothing.

    Thanks for all the suggestions.
    Maybe I need to quit Blogger and go Wordpress.


  •  

    Posting Permissions

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