Floating Divs…

  • I’ve seen other people comment on issues with getting their floating DIVs to work, but I haven’t found the answer yet, or at least one I understood.

    This is my first template. I coded a pretty simple float left body and float right sidebar with a footer that sticks to the bottom with a positioning set at 0. It all checks out in W3C validation and looks great as a static page.

    However, then I split it out into it’s various templates Header, Index, Sidebar, footer etc. files. The Sidebar keeps on popping up below the footer and it looks all screwy. The only good thing is that it still validates, although it looks screwy.

    Is there anything I need to be careful of when floating Divs? Should I use absolute postioning? Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Try and avoid absolute or relative positioning unless you really have to use them.

    Make sure that floated divs have a width, especially those containing text that will extend 100%. If you have 1 div floating left and one floating right put them in a container with a clear:both property. This will resolve the issue when one div floats beneath another.

    Example:

    #div_container {
clear:both;
}

.div1 {
float left;
width:300px
}

.div2 {
float;right;
width:400px;
}

HTML:

<div id="div_container">
<div class="div1">
...
</div>
<div class="div2">
...
</div>
</div>
    Thread Starter working-together

    (@working-together)

    So, I put some of my code below. I think this has something to do with how i’m nesting Divs. From looking at the Page Source when I test the template, for whatever reason it is pulling the Sidebar outside the container for the floating divs. Thus, the Sidebar is showing up below the Footer.

    In regards to the header, because I am incorporating this blog into a static site, I have added the nav links into it as it isn’t going to change. I’m not sure this matters or not.

    As I said, it looks fine static wise but the sidebar is just pulling wrong when I use it in wordpress.

    Any ideas?

    ———–index.php————

    <?php get_header(); ?>

    <div id=”theMainContent”>
    <div class=”theMainLeft”></div>
    </div>
    </div>

    <?php get_sidebar(); ?>

    <?php get_footer(); ?>

    —–CSS——

    #theMainContent {
    margin:0 auto;
    overflow: hidden;
    clear:both;
    background-image:url(/images/LeftNavArea.jpg);
    background-repeat:repeat-y;
    }

    .Sidebar {
    width: 268px;
    float:right;
    min-height: 427px;
    height: auto;
    height: 427px;
    background-image:url(images/LeftNavArea.jpg);
    background-repeat:repeat;
    }

    .theMainLeft {
    width: 532px;
    float:left;
    min-height: 427px;
    background-image:url(images/ContentTopBar.jpg);
    background-repeat:no-repeat;
    }

    Ok you have 2 closing divs in the beginning. You should have one and you need to wrap <?php get_sidebar(); ?> in the .Sidebar div.

    You can validate the HTML and it will tell you the mistakes. https://validator.w3.org/

    also look into firefox firebug. With firebug you can alter to code live and see any mistakes.. other than that just study how to use HTML and CSS. There’s a lot to cover. Best you find some basic tutorials.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Floating Divs…’ is closed to new replies.