[css-d] Tricky 3-col layout issue

[Jenn Mears-Nickerson]

Hello,

This may be a simple fix, but I think I have familiarity blindness at this 
point.  I have a templat layout that I have been customizing and I almost have 
it working here:

http://testblog.jennmearswebdesign.com

As you can probably tell, I'm trying to squeeze a third column in on the right, 
but the center content keeps forcing it down.  I tried wrapping the left column 
and the content into their own wrapper div, but it made things even crazier.

Is there a way to float the content (posts) in the center without having to 
wrap it into another div?

Here is the relevant CSS as it stands now.  I put a string of asterix next to 
the tags that I have been modifying from the original:

/* Layout */
.outerMost {
    margin: 0 auto;
    width: 950px; 
    background: url(images/950-main_table_bg.gif) center repeat-y;
}

#wrapper {
    margin: 0 auto;
    width: 912px;
    background-color: #FFF;
    text-align: left;
    
}
#header {
    background-color: #F5F5E7;

}
    /* Header Styles */
    #header h1 {
        margin: 0;
        font-size: 1.8em;
    }
    #header h1 a {
        text-decoration: none;
        color: #80904F;
    }

        
#content {  ***********
    float: none;
    margin: 0 0 0 10px;
    width: 350px;
    display: inline; /* IE double margin bug fix */
}

#sidebar {
    float: left;
    margin: 0 10px 0 10px;
    padding: 0 0 0 0px;
    width: 206px;
    font-size: 0.9em;
    display: inline; /* IE double margin bug fix */
    border: 2px solid #DFD5BC;
    
}

* html #content, * html #sidebar {
    overflow: hidden; /* For IE */
}

/* Blog */

.post {   *********
float:left;
width:350px;

}
.posttitle {
    margin-bottom: 0;
    width: 400px;
    color: #FFF;
    overflow: auto;
    /* Width and overflow to clear '.posttitle a' */
}
.posttitle a {
    float: left;
    padding: 0 10px;
    background: #9BBB38 url(images/posttitle.gif) no-repeat top right;
}
.posttitle a:link, .posttitle a:visited {
    color: #FFF;    
}
.posttitle a:hover, .posttitle a:active {
    background: #E8E7D0 url(images/posttitle.gif) no-repeat 100% -91px;
    color: #80904F;
}
.postmeta {
    margin-top: 0;
    padding-top: 1px;
    background: url(images/postmeta.gif) no-repeat top left;
    font-size: 0.9em;
    color: #999;
}
.postentry {  **********

width:350px;

}
.permalink {
    margin: 0 1.8em 0 0;
    padding: 0 0 0 14px;
    background: url(images/permalink.gif) no-repeat center left;
}
.commentslink {
    padding: 0 0 0 17px;
    background: url(images/commentslink.gif) no-repeat center left;
}

Thanks in advance for any help!

Jenn Mears-Nickerson


______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/