Three Column Float Issues

  • 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?

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

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

    Thread Starter pbrainz

    (@pbrainz)

    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.

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

    Vesuvivius 1.5 is also a quite flexible 3 column design.

    Thread Starter pbrainz

    (@pbrainz)

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

    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.

    Thread Starter pbrainz

    (@pbrainz)

    Thanks everyone! It all works perfectly.

    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.

    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.

    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.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Three Column Float Issues’ is closed to new replies.