WordPress.org

Ready to get started?Download WordPress

Forums

Three Column Float Issues (11 posts)

  1. pbrainz
    Member
    Posted 8 years ago #

    Hey guys,

    I looked around at the other three column threads and have yet to find my problem... so here it is. I've been tinkering around with a theme and can't get it to become three column properly. I have a sidebar, content, and farsidebar (bar on the right). No matter how I float it the content always hugs the right or hugs the left... leaving both the sidebars stuck together. Here are the important bits of the style sheet:

    '#main
    {
    margin:0 auto;
    padding:0;
    background:#000 url('img/content_bg.gif') repeat;
    width:800px;
    }
    #sidebar {
    width:125px;
    float:left;
    padding:0px 8px 10px 8px;
    margin:0;
    font-size:1em;
    color:#333333;
    display:inline;
    }
    #content {
    width:400px;
    float:right;
    padding:5px;
    margin:0;
    overflow:hidden;
    display:inline;
    }
    #farsidebar {
    width:220px;
    float:right;
    padding:0px 8px 10px;
    margin:0;
    font-size:1em;
    color:#333333;
    display:inline;
    }'

    And here are the header and footer:

    '#header {
    background:#fff url('img/logo.jpg') no-repeat bottom;
    height: 100px;
    margin: 0 auto;
    width:800px;
    padding:0;
    border:#fc9 0px solid;
    }
    #footer {
    margin:0 auto;
    padding: 7px 0;
    border-top:#BBC4A3 1px solid;
    clear: both;
    font-size: 0.8em;
    color: #999;
    text-align:center;
    width:740px;
    }'

    ideas?

  2. Mark (podz)
    Support Maven
    Posted 8 years ago #

    Not the answer you want maybe, but a solid 3-column theme which you can easily build on is Trident:
    http://eretzvaju.org/trident

  3. pbrainz
    Member
    Posted 8 years ago #

    The crappy thing is that I put so many hours into the theme I'm working on... and found that there are templates i could have built off of. It's too late to turn it around... i've put way too much effort into this one. Thanks though.

  4. archshrk
    Member
    Posted 8 years ago #

    But it might have the clues you need to fix your own theme. I've been using Treacle with little to no problems.
    http://not-that-ugly.co.uk/?page_id=42

  5. moshu
    Member
    Posted 8 years ago #

    Vesuvivius 1.5 is also a quite flexible 3 column design.

  6. pbrainz
    Member
    Posted 8 years ago #

    Oooh. But do any of you have any ideas on how I can fix my style sheet?

  7. Yngwin
    Member
    Posted 8 years ago #

    The trick with floating three columns is "pairing" them. Something like this:

    <div id="wrap">
    <div id="main">
    <div id="content">...</div>
    <div id="sidebar">...</div>
    </div>
    <div id="extrasidebar">...</div>
    </div>

    Then float main left and extrasidebar right, and within main float sidebar left and content right. Of course main needs a width defined that is content+sidebar(+margins). This works very well in a fixed-width layout.

  8. pbrainz
    Member
    Posted 8 years ago #

    Thanks everyone! It all works perfectly.

  9. WildBil2Me
    Member
    Posted 8 years ago #

    I started using percentages instead of exact pixel counts awhile back and found that it made floating columns and boxes much easier.

    As Yngwin mentions, properly wrapping the div blocks will also make things alot easier.

  10. cybrarian
    Member
    Posted 8 years ago #

    I'm running a three column theme that I'm not entirely happy with, but it does the job. Unfortunately everything's a bit fixed width, so it's not all that scaleable, but the main problem is that because of the ordering of divs and the structure, anything that uses clear:both; ends up clearing the left and right columns, which means I've had to hack the odd plugin here and there.

  11. ubersoft
    Member
    Posted 8 years ago #

    Take a look at eviscerati.org -- I heavily modified Kubrick, stripped it down and built it back up, into a 3-column layout.

    What I did was make the right and left columns a fixed width, then set the center column margins so they would never overlap. In other words, if lcolumn and rcolumn have a width of 200px, I set the left margin of ccolumn to 205px and the right margin of ccolumn to 205px. This allows the site to take up the whole page and the center column contracts and expands as you resize the page.

    The problem with this is if you have something in ccolumn (like a graphic) that bleeds into the left and right columns. When that happens, ccolumn will shoot to the bottom of the page. If your site is mostly text, though, that won't really be a problem.

Topic Closed

This topic has been closed to new replies.

About this Topic