SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Not pushing Content Down...

    Hello all,

    I have a wordpress template I am building. When the content passes the sidebar, the content background stops and the text runs on... I have included a screenshot.

    Here is the CSS and CODE:

    HTML Code:
    *{
        padding:0;
        margin:0;
    
    }
    
    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        background-color: #4A4236;
        color:#FCF8F2;
    }
    
    #page {
        width: 800px;
        margin: 0 auto;
    }
    
    #header {
        width: 100%;
    }
    
    #headerimg {
        background-image: url(images/header-bg.png);
        background-repeat: no-repeat;
        height:172px;
        widows:800px;
    }
    
    .description {
    
    }
    
    #wrapper {
        width: 760px;
        background-color: #363129;
        padding:10px;
        margin-left:auto;
        margin-right:auto;
        background-image:url(images/body_bottom.png);
        background-repeat: no-repeat;
        background-position: center bottom;
    }
    
    #content {
        float: left;
        width: 65%;
    }
    
    #sidebar {
        width: 28%;
        margin-left: 70%;
    
    }
    
    #footer {
        width: 760px;
        clear: both;
        height:250px;
        margin-left:auto;
        margin-right:auto;
        padding:10px;
        margin-top:10px;
        color:#FCF8F2;
        font-size:10px;
    }
    a{
    color:#D4C0A0;
    text-decoration:none;
    }
    a:hover{
    color:#ffffff;
    }
    #topnav{
    float:right;
    margin-right:15px;
    margin-top:134px;
    }
    #topnav ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #topnav li{
        display:inline;
        margin-right:10px;
    }
    #topnav li a{
        /*    background-image: url(images/menubutton.png);*/
        height: 35px;
        width: 116px;
        background:#363129;
        border-top:1px solid #D4C0A0;
        border-left:1px solid #D4C0A0;
        border-right:1px solid #D4C0A0;        
        padding-top: 5px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 10px;
        margin-top: 0px;
        margin-right: 5px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
    #topnav li a:hover{
    background:#7E7467;
    }
    .pagenav {
     
    }
    .page_item { 
     
    }
    .current_page_item { 
     
    }
    .current_page_parent { 
     
    }
    /*-------------Headings-------------*/
    
    h1 {
    font-size:22px;
    }
    
    h2 {
    font-size:20px;
    color:#FDDFB0;
    }
    
    h3 {
    font-size:16px;
    }
    
    h4 {
    font-size:15px;
    font-weight:bold;
    }
    
    h5 {
    font-size:14px;
    font-weight:bold;
    }
    
    /*-------------The Post-------------*/
    
    
    
    h2 a:hover, h2 a:visited, h2 a {
    color:#FDDFB0;
    }
    .pdate{
    font-size:10px;
    font-weight:bold;
    color:#E7E0D4;
    margin-bottom:1em;
    }
    .entrytext, .post {
    font-size:14px;
    }
    .post img{
    margin:5px 10px 10px 0px;
    border: 2px dotted #e09435;
    }
    .post p {
    line-height:1.5em;
    }
    
    .post a {
    
    }
    
    .post ul {
    
    }
    
    .post li {
    
    }
    
    .entry {
    
    }
    .postmetadata {
    font-size:10px;
    font-weight:bold;
    color:#E7E0D4;
    margin-bottom:1em;
    margin-top:1em;
    }
    
    .postmetadata alt {
    
    }
    
    .postmetadata a {
    
    }
    
    .navigation {
    
    }
    
    .alignleft {
    
    }
    
    .alignright {
    
    }
    
    .center {
    
    }
    
    .pagetitle {
    
    }
    
    blockquote {
    
    }
    
    cite {
    
    }
    
    a img {
    
    }
    
    acronym, abbr {
    
    }
    
    /*--------------Sidebar------------*/
    #sidebar{
    line-height:1.5em;
    }
    #sidebar ul {
    list-style:none;
    }
    
    #sidebar ul h2 {
    border-bottom:1px dotted #E09435;
    padding-bottom:.1em;
    margin-bottom:.3em;
    margin-top: 1em;
    }
    
    #sidebar ul li {
    
    }
    
    #sidebar ul ul {
    
    }
    
    #sidebar ul ul li {
    
    }
    
    #sidebar ul ul ul {
    
    }
    
    #sidebar p {
    
    }
    
    #sidebar a {
    
    }
    #sidebar a:hover {
    
    }
    
    #sidebar a:visited {
    
    }
    
    
    /*--------------Comments--------------*/
    
    ol.commentlist {
    
    }
    
    ol.commentlist li {
    
    }
    
    ol.commentlist li.alt {
    
    }
    
    ol.commentlist a {
    
    }
    
    small.commentmetadata {
    
    }
    
    /*--------------Search Form and othe forms-------------*/
    input{
    border: 1px dotted #E09435;
    padding:5px;
    background:#7E7467;
    color:#D4C0A0;
    }
    textarea{
    border: 1px dotted #E09435;
    padding:5px;
    background:#ECDAC3;
    width:400px;
    height:150px;
    margin-bottom: 10px;
    }
    
    #searchform {
    
    }
    #searchform #searchsubmit{
    background:#7E7467;
    color:#D4C0A0;
    }
    #searchform input {
    background:#7E7467;
    color:#333333;
    }
    #searchform #s {
    width:120px;
    background:#ECDAC3;
    }
    
    
    /*-------------Calendar-----------------*/
    
    #wp-calendar {
    
    }
    
    #wp-calendar th {
    
    }
    
    #wp-calendar a {
    
    }
    
    #prev a, #next a {
    
    }
    
    #wp-calendar caption {
    
    }
    
    /*-------------Images------------------*/
    
    
    
    
    /*-------------Other------------------*/
    
    hr {
        display: none;
    }
    PHP Code:
    <?php get_header(); ?>
    <div id="wrapper">
        <div id="content">

        <?php if (have_posts()) : ?>
            
            <?php while (have_posts()) : the_post(); ?>
                    
                <div class="post" id="post-<?php the_ID(); ?>">
                    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                    <div class="pdate"><?php the_time('F jS, Y'?> <!-- by <?php the_author() ?> --></div>
                    
                    <div class="entry">
                        <?php the_content('Read the rest of this entry &raquo;'); ?>
                    </div>
            
                    <p class="postmetadata">Posted in <?php the_category(', '?> <strong>|</strong> <?php edit_post_link('Edit','','<strong>|</strong>'); ?>  <?php comments_popup_link('No Comments »''1 Comment »''% Comments »'); ?></p>
                </div>
        
            <?php endwhile; ?>

            <div class="navigation">
                <div class="alignleft"><?php next_posts_link('&laquo; Previous Entries'?></div>
                <div class="alignright"><?php previous_posts_link('Next Entries &raquo;'?></div>
            </div>
            
        <?php else : ?>

            <h2 class="center">Not Found</h2>
            <p class="center">Sorry, but you are looking for something that isn't here.</p>
            <?php include (TEMPLATEPATH "/searchform.php"); ?>

        <?php endif; ?>

        </div>

    <?php get_sidebar(); ?>
    </div>
    <?php get_footer(); ?>
    Anyone have an idea why? The footer pushes down fine, but the rest of the content won't.

    Thanks!
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've not tested this but it's almost certainly a problem with clearing floats. If you add the following overflow to the #wrapper then it should fix it.

    Code:
    #wrapper {
        width: 760px;
        background-color: #363129;
        padding:10px;
        margin-left:auto;
        margin-right:auto;
        background-image:url(images/body_bottom.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        overflow: auto;
    }
    You may also need to apply a small hack for IE6 although I suspect that the width on the #wrapper should force "haslayout" anyway... but here it is just in case.

    Code:
    * html #wrapper {
        height: 1&#37;;
    }
    Hope that helps.

  3. #3
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YEap that Overflow worked.

    What is that doing exactally?

    Thanks for the help!

    Nice Clean Personal Site by the way!
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the article that explains it's origins...

    http://www.sitepoint.com/blogs/2005/...ing-of-floats/



Bookmarks

Posting Permissions

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