Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Junior Member
    Join Date
    Feb 2011
    Posts
    8
    Member #
    26984
    Hey guys i've been having some trouble with this div for a while now and hopefully someone will be able to help me out. I created a liquid layout for a wordpress theme and for some reason the div "wordpress_content" expands outside all of the other divs. This div also expands the page and passes through the footer.

    I still want this div to be able to expand to the height needed as comments are posted, but i need to push the footer below and expand the heights of the other divs that are vertically parallel. I hope this all makes sense and that someone could give me a hand.

    Code:
    html, body
    {
        height:100%;
        width:100%;
        margin:0px;
        padding:0px;
        background-color:#0053df;
        font-family:Georgia, "Times New Roman", Times, serif;
    }
    
    div#container
    {
        height:100%;
        width:100%;
        margin:0;
        padding:0px;
        background-color:#0053df;
    }
    
    div#header
    {
        margin-left:0px auto;
        margin-right:0px auto;
        height:195px;
        width:1280px;
        top:0px;
        text-align:center;
    }
    
    div#navigation_bar
    {
        height:85px;
        width:100%;
        top:195px;
        padding:0;
    }
    
    div#content
    {
        height:100%;
        width:1280px;
        margin-left:-640px;
        position:relative;
        left:50%;
        top:0px;
    }
    
    div#left_sidebar
    {
        height:100%;
        width:183px;
        top:0px;
        float:left;
    }
    
    div#wordpress_box
    {
        height:100%;
        width:916px;
        float:left;
        top:0px;
        margin-left:0 auto;
        margin-right:0 auto;
        padding-bottom:72px;
    }
    
    div#right_sidebar
    {
        height:100%;
        width:181px;
        top:0px;
        float:left;
    }
    
    div#textbox_top
    {
        height:36px;
        width:916px;
        margin-left:0px auto;
        margin-right:0px auto;
        float:left;
        top:0px;
        padding-bottom:8px;
        clear:right;
    }
    
    div#textbox_leftside
    {
        height:100%;
        width:38px;
        float:left;
    }
    
    div#wordpress
    {
        height:100%;
        width:634px;
        float:left;
        background-color:#efefef;
    
    }
    
    div#wpdivider
    {
        height:100%;
        width:56px;
        float:left;
    }
    
    div#wpsidebar
    {
        height:100%;
        width:150px;
        float:left;
        background-color:#efefef;
        list-style-type:none;
    }
    
    div#textbox_rightside
    {
        height:100%;
        width:38px;
        float:left;
        margin-left:-38px;
    }
    
    div#text_bottom
    {
        float:left;
        height:36px;
        width:916px;
        bottom:0px;
        padding:0px;
    }
    
    div#footer
    {
        height:71px;
        width:100%;
        position:relative;
        bottom:0px;
        margin:0;
        overflow:hidden;
        clear:both;
    }
    
    div#textbox_top
    {
        height:28px;
        width:916px;
        margin-left:0px auto;
        margin-right:0px auto;
        float:left;
        top:280px;
        clear:left;
    }
    
    div#wordpress_content
    {
        height:100%;
        width:916px;
        position:relative;
        top:0px;
        margin:0px;
        padding:0px;
    }
    
    div#sbborder
    {
        height:100%;
        width:188px;
        float:left;
    }
    
    div#wordpress_text
    {
    
        width:624px;
        margin-left:5px;
        margin-right: 0 auto;
        background-color:#efefef;
    
    }
    
    span#blog_title
    {
        text-align:center;
        text-align:
    }
    
    a:link
    {
        text-decoration:none;
        color:#1c6aed;
    }
    
    a:visited
    {
        text-decoration:none;
        color:#1c6aed;
    }
    
    a:hover
    {
        font-weight:bolder;
        color:#1c6aed;
    }
    
    a:active
    {
    text-decoration:none;
    }
    
    div#comment_box_outer
    {
        width:614px;
        height:auto;
        margin-left:5px;
        margin-right: -10px;
        background-image:url(images/comment%20background.jpg);
    }
    
    div#comment_box
    {
        width:500px;
        margin-left:30px;
        margin-right: 10px;
        padding-bottom:25px;
    }
    
    span#cancel_reply
    {
        color:#54c7f1;
    }
    /*
    input#author
    {
        background-color:#efefef;
    }
    
    input#email
    {
        background-color:#efefef;
    }
    
    input#url
    {
        background-color:#efefef;
    }
    
    textarea#comment
    {
        background-color:#efefef;
    }
    */
    
    div#comment1
    {
        border:solid;
        border-width:3px;
        border-color:#9d9fa0;
        padding:5px;
        width:565px;
    }
    
    h3#comments-title
    {
        text-align:center;
    }
    
    div#comment_area
    {
        width:634px;
        height:100%;
        position:relative;
        top:0px;
    }

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Have you got your blog thrown up somewhere so we can have a look at it?
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Feb 2011
    Posts
    8
    Member #
    26984
    Quote Originally Posted by TheGAME1264, post: 199179
    Have you got your blog thrown up somewhere so we can have a look at it?
    Yeah here's a link, I hope this helps.

    http://geekpowwow.com/blog/2011/01/0...orld/#comments

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Take the height: 100% out of just about everything you're doing. The height will automatically expand that way. If you need it for anything, and you usually don't, put it into one element at a time to make sure it works.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Junior Member
    Join Date
    Feb 2011
    Posts
    8
    Member #
    26984
    Quote Originally Posted by TheGAME1264, post: 199218
    Take the height: 100% out of just about everything you're doing. The height will automatically expand that way. If you need it for anything, and you usually don't, put it into one element at a time to make sure it works.
    Thanks for the help that did solve the issue i was having, but unfortunately the heights of content divs no longer fill the entire page. I tried going back and changing the heights to 100% individually for each of the necessary divs, but no luck. Any ideas how to solve this problem?

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    You could split your background into three pieces (the header, the body and the footer) and use a variant of faux columns to achieve the desired effect. Not sure if this will work for you, though.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Junior Member
    Join Date
    Feb 2011
    Posts
    8
    Member #
    26984
    Quote Originally Posted by TheGAME1264, post: 199226
    You could split your background into three pieces (the header, the body and the footer) and use a variant of faux columns to achieve the desired effect. Not sure if this will work for you, though.
    Thanks, i gave faux columns a shot but it's not going to work w/ my layout. I'm still working on it at the moment, but to get the desired effect that I want the "content" div needs a height of 100%. But when i do that the footer gets all out of whack like it had initially been. There's got to be something that i'm missing or doing incorrectly.

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    If you mean that you want the background to go all the way up and down the page, you could center the background in your body tag and then put in all of your backgrounds around it.

    I'm really not sure what you're trying to do here, though.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Junior Member
    Join Date
    Feb 2011
    Posts
    8
    Member #
    26984
    Quote Originally Posted by TheGAME1264, post: 199243
    If you mean that you want the background to go all the way up and down the page, you could center the background in your body tag and then put in all of your backgrounds around it.

    I'm really not sure what you're trying to do here, though.
    Yes, I'm trying to get the following divs to span down 100% of the body height between the header and footer, which will vary depending on the number of posts and comments:

    <div id="textbox_leftside">
    <div id="wordpress_text">
    <div id="wpdivider">
    <div id="sbborder">
    (The sidebar in the sidebar.php file)
    <div id="textbox_rightside">

    I've included the body section of code from my index file. The header and footer are not included, but they get called within the index file in their respective positions. I hope this makes more sense and clarifies what i'm trying to achieve. If it's still not clear what i'm trying to do let me know. Thanks again I really appreciate the help.

    Code:
    <div id="content">
    <div id="left_sidebar"> <img src="<?php bloginfo('template_directory'); ?>/images/left-side-bar.gif" alt="" width="183" height="100%" /> </div>
    <div id="wordpress_box">
    <div id="wordpress_content">
    
            <div id="textbox_top"> <img src="<?php bloginfo('template_directory'); ?>/images/text-box-top.jpg" alt="" width="916" height="36" /> </div>
            <div id="textbox_leftside"> <img src="<?php bloginfo('template_directory'); ?>/images/text-box-left-side.gif" alt="" width="38" height="100%" /> </div>
            <div id="wordpress">
            <div id="wordpress_text">
            <span id="blog_title">
                            <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
                        </span>
            <?php
                /* Run the loop to output the posts.
                 * If you want to overload this in a child theme then include a file
                 * called loop-index.php and that will be used instead.
                 */
                 get_template_part( 'loop', 'index' );
                ?>
                </div>
                </div>
            <div id="wpdivider"><img src="<?php bloginfo('template_directory'); ?>/images/between-wp-content-and-sb.gif" alt="" width="56" height="100%" /></div>
            <div id="sbborder">
            <?php get_sidebar(); ?>
            <div id="textbox_rightside"><img src="<?php bloginfo('template_directory'); ?>/images/text-box-right-side.gif" alt="" width="38" height="100%" />
            </div>
    
    </div>
    <div id="text_bottom"> <img src="<?php bloginfo('template_directory'); ?>/images/text-box-bottom.gif" alt="" width="916" height="36" /> </div>
    </div>
    </div>
    <div id="right_sidebar"> <img src="<?php bloginfo('template_directory'); ?>/images/right-side-bar.gif" alt="" width="181" height="100%" /></div>
    </div>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:19 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com