[bozzy]

I’ve got the header and footer to load correctly, but the sidebar is pushed to the bottom… I think this is a CSS problem… but what do I need to change to fix this?

Thanks!!!

http://forums.bozzysworld.com/

[fel64]

That’s because you’re using a left-hand margin on your sidebar and your main div to push them to the right.

<div id="main">

<div id="discussions">



<div id="secondary">

That’s roughly your HTML structure. Main is the full width of the central white bar, so there’s no way you can get Secondary next to it. Discussions is a sub-part of Main, and it’s pushed over to the right by a large margin on the left.

Secondary is not part of Main, and pushed over to the far right because it has a humoungous 71% margin.

Firstly you want to put Secondary into your Main div, otherwise there’s no way to do it. Then you need to put either one on the left; the way to do this would be to get rid of its giant margin. That should work.

Otherwise, if you’re not doing it by the margin property, you could put Secondary into Main again, then give Secondary and Discussions a float: left; and a float: right; property (or the other way around). If there’s enough room, they should now be side by side – otherwise make them narrower.

You can also get rid of the wrapper‘s border properties, that’s what’s giving you the double-width line.

That’s a nice theme you made, though.

[bozzy]

Thanks for the help! I have a couple more questions if you wouldn’t mind… I fixed the problem with sidebar on the front page (although I can’t get it all the way to the top, any suggestions?), and I can’t seem to figure out how to fix the sidebar on the other pages (topics, forums, edit profile, etc)… I’ve looked all over the css the file and can’t figure it out…

Thanks again for all your help!

[fel64]

Yes. Put the Secondary in Main, get rid of its margin, add the CSS float property to both Secondary and Discussion – one float: right, one float: left. That will make it work.

[bozzy]

I’m not sure I get it… here is what my css file looks like:

/*

Theme Name: K2 for bbPress

Theme URI: http://www.linickx.com/blog/archives/253/k2-for-bbpress/

Description: A port of the famous k2 to bbpress

Version: 0.01 theta-beta

Author: Nick [LINICKX] Bettison

Author URI: http://www.linickx.com

*/

/*

Derrived from Bryan Veloso orriginal style sheet that ships with bbpress, added a little style from the sheet availble from http://getk2.com, copyright of that to the people at http://binarybonsai.com !

*/

/* Globals

=================================== */

* { margin: 0; padding: 0; }

body {

font: 62.5% ‘Lucida Grande’, Verdana, Arial, Sans-Serif; /* 62.5% sets 1em to about 10px */

background: #EDEDED;

color: #444;

text-align: center;

margin-bottom: 30px;

}

a { color: #27d; text-decoration: none; }

a:hover { color: #27d; text-decoration: underline; }

.alt { background: #fff; }

code { font: 1.0em Monaco, ‘Courier New’, monospace; }

p { margin-bottom: 1.0em; }

.left { float: left; }

.right { float: right; }

.delete:hover {

background: #c00;

color: #fff;

}

h1 { font-size: 2em; }

h2 { font-size: 1.5em; }

/* Structure

=================================== */

#wrapper {

width: 780px; /* controls the main width of the page, if changed also change #content and .sidebar */

margin: 0 auto;

background: white;

text-align: left;

}

#header {

padding: 0;

margin: 0;

position: relative;

height: 200px;

background: #3371A3; /* header color default is #3371A3, for images – background-image: url(example.jpg); */

}

h1, h2, h3, h4 {

font-family: ‘Trebuchet MS’, Verdana, Sans-Serif;

}

#header h1 {

font-size: 3em;

font-weight: bold;

letter-spacing: -1px;

margin: 0;

padding: 75px 0 0 40px;

}

#header p { margin-bottom: 0; }

#header h1 a, #header h1 a:visited { color: #fff; text-decoration: none; }

#header h1 a:hover, #header h1 a:active{ text-decoration: underline; }

#main {

font-size: 1.2em;

width: 760px;

margin: 10px auto 25px;

position: relative;

}

.bbcrumb {

text-transform: uppercase;

font-size: 0.9em;

letter-spacing: 1px;

}

#footer {

margin: auto;

color: #666;

font-size: 1.0em;

letter-spacing: 2px;

text-transform: uppercase;

padding-top: 10px;

clear: both;

text-align: center;

width: 760px;

}

#footer a:link, #footer a:visited { /* more link link color fixes for nav & admin stuff */

color: #777;

text-decoration: none;

font-weight: bold;

}

#footer a:hover, #footer a:active {

color: #000;

text-decoration: underline;

font-weight: bold;

}

.notice {

border: 2px solid #4c9545;

background: #abd8a2;

color: #4c9545;

font-size: 1.1em;

font-weight: bold;

padding: 10px 15px;

margin: 0 0 1.1em;

}

.notice p { margin-bottom: 0; }

/* Login Form

=================================== */

.login {

color: #000;

margin: 10px 40px;

}

.login a, .login a:visited { color: #000; text-decoration: none; }

.login a:hover, .login h1 a:active{ text-decoration: underline; }

.login p { padding: 0 0 5px; }

.login label {

display: block;

float: left;

padding-right: 10px;

}

.login #submit {

font-size: 1.2em;

margin-top: 13px;

float: left;

}

p.login {

font-weight: normal;

font-size: 1.2em;

}

form.login input {

margin-top: 3px;

border: 1px solid #999;

}

/* Front Page

=================================== */

#front-page #hottags {

position: absolute;

top: 0;

left: 0;

width: 150px;

overflow: hidden;

}

#front-page #discussions {

margin-left: 0px;

width: 500px;

float: left;

}

.frontpageheatmap {

font-weight: normal;

line-height: 30px;

padding-bottom: 10px;

}

#front-page #main h2, h2.post-form, #userlogin, #currentfavorites, #register {

color: #333;

border-bottom: 1px solid #ddd;

margin: 0 0 10px;

padding: 0 0 5px;

}

#front-page #discussions ul { padding: 0 0 0 14px; }

.sticky {

background: #EDEDED;

}

/* Topic Page

=================================== */

.infobox {

border: 1px solid #ccc;

border-width: 1px 0;

padding: 1em;

width: 500px;

}

.infobox ul {

margin: 10px 0 10px 12px;

padding: 0;

}

.infobox ul li { padding-bottom: 3px; }

#topic-tags {

border-left: 1px solid #ccc;

float: right;

margin-top: -2em;

padding: 0 1em 1em;

}

.nav {

margin: 15px 0;

padding: 12px 0;

}

.nav span { font-weight: bold; }

.nav span, .nav a { padding: 6px; }

#thread {

background: #eee;

list-style: none;

margin: 0 0 0 100px;

padding: 0;

width: 500px;

}

#thread li {

padding: 1.5em 1.0em;

line-height: 1.5em;

}

#thread li ol, #thread li ul { margin-left: 40px; }

#thread li ol li, #thread li ul li { padding: 0; }

.threadauthor {

margin-left: -110px;

overflow: hidden;

position: absolute;

width: 95px;

}

.threadauthor small { font: 11px Verdana, Arial, Helvetica, sans-serif; }

.poststuff {

border-top: 1px dotted #ccc;

margin: 10px 0 0;

padding: 5px 0 0;

font: 10px Verdana, Arial, Helvetica, sans-serif;

text-transform: uppercase;

width: 500px;

}

.num, #forumlist small {

font: 11px Verdana,Arial,Helvetica,sans-serif;

text-align: center;

}

.postform {

background: #fff;

padding: 1em;

width: 500px;

}

.postform textarea {

height: 12em;

margin: 5px 0;

padding: 5px;

width: 500px;

display: block;

}

.postform label { display: block; width: 500px;}

.admin { padding: 10px 0 0; }

#manage-tags {

margin: 10px 0;

list-style: none;

}

#manage-tags li {

float: left;

width: 200px;

padding-bottom: 10px;

}

.submit { text-align: right; }

.topiclink { display: block; }

.topictitle {

font-size: 26px;

font-weight: normal;

display: inline;

}

/* Other

=================================== */

#content .frontpageheatmap a {

font-weight: normal;

text-decoration: none;

}

#content .infobox li { margin-bottom: 2px; }

#content .nav a {

border: 1px solid #ccc;

font-weight: normal;

}

#content .nav a:hover {

border: 1px solid #999;

}

#content a:visited {

font-weight: normal;

}

#front-search {

float: right;

margin-top: -8px;

}

#latest td, #forumlist td, #favorites td { padding: 5px 10px; }

#latest tr:hover, #forumlist tr:hover, #favorites tr:hover { background: #cbd9e4; }

#latest th, #forumlist th, #favorites th {

/* border-bottom: 1px solid #aaa; */

background: #3371A3;

color: #fff;

padding: 5px 10px;

text-transform: uppercase;

font-weight: bold;

}

#latest th a:link, #latest th a:visited, #latest th a:active {

color:#fff;

}

#latest, #forumlist, #favorites {

background: #f7f7f7;

margin-bottom: 2em;

width: 100%;

}

.bozo { background: #eeee88; }

.alt.bozo { background: #ffff99; }

.deleted { background: #ee8888; }

.alt.deleted { background: #ff9999; }

/* Profile Page

=================================== */

#profile-menu {

margin: -35px 0px;

padding: 0 0 30px 0;

float:right;

}

#profile-menu ul {

margin: 0;

padding: 0;

position: absolute;

bottom: 0;

left: 20px;

width: 90%;

}

#profile-menu li {

display: inline;

margin: 0;

}

#profile-menu,

#profile-menu li a {

padding: 5px 15px 6px;

}

#profile-menu li a {

font-size: 1em;

color: white;

margin: 0;

}

#profile-menu li a:hover {

background: #333;

color: #eee !important;

text-decoration: none;

}

#profile-menu li.current a,

ul.menu li.current a:hover {

color: #333 !important;

background: white;

text-decoration: none;

}

#userinfo { margin-top: 10px; }

#userinfo dt { font-weight: bold; }

#userinfo dd { margin: 0 0 5px; }

#useractivity { margin: 15px 0 5px; }

.user-recent { margin: 0 0 10px; }

.user-recent ol { margin: 5px 0 0 28px; }

.user-recent ol li { margin: 0 0 3px; }

/* Profile Edit

=================================== */

fieldset {

border-top: 3px double #ccc;

border-bottom: 1px solid #ccc;

border-left: none;

border-right: none;

padding: 10px 0 10px 10px;

margin-bottom: 15px;

width: 500px;

}

legend {

font-weight: bold;

padding: 0 15px;

}

fieldset table {

text-align: left;

margin: 0 15px;

}

fieldset table td { padding: 2px 0; }

fieldset p {

font-size: 11px;

margin: 10px 16px;

}

/* further additions by Nick */

/* this is for my 48 x 48 avatars */

.post {

min-height: 60px;

}

Can you tell me if it’s right?

[fel64]

Rather than filling up pages of this forum, it would be nice if you could use something like pastebin.

That’s not your only stylesheet. Style declarations for your forum are also made in http://www.bozzysworld.com/wp-content/themes/k2, which is where you need to make the changes to .secondary and so on. Since you have several different stylesheets referenced they may be conflicting. Changing that stylesheet may have knock-on effects on your main site’s theme. Are you using your wordpress header? It may be easier to recreate your header for bbPress but with seperate stylesheets, so that modifications for your forums will not affect your front page.

[bozzy]

Almost there… one quick question, do you know which part of the stylesheet controls the ‘reply’ line?

It’s stretched across the whole page, unlike the rest…

http://forums.bozzysworld.com/topic/6?replies=1

[fel64]

h2.postform is in /bb-templates/k2/style.css, line 194. It’s stretched like that because it by default takes up the whole width of the parent element, which is Secondary. It is more effective to set the width for Secondary than for the child elements, because the Secondary width will automatically control all the child elements too.

Firebug is an invaluable HTML, CSS and JS debugger.

[bozzy]

Yeah, I tried changing the width for secondary, but all that did was make the sidebar smaller. the line was still stretched across the whole page…