[RESOLVED] wrapper is not extending the length of my sidebar

This site is best viewed in a modern browser with JavaScript enabled.

[RESOLVED] wrapper is not extending the length of my sidebar

roottoor

Yes, I am using WordPress. Yes, I have asked for support there. No, they seem to be too 'tired' to offer support. Luckily for me, I am using a theme which has been written for css design not centered around the WordPress platform, so I am hoping to be able to come here for some help.

For starters, I have ported my own version of the AoC Community website (found here) to my Word press website (found here). I am using position: absolute to place my sidebar where I am needing it, but either this positioning method or something else is causing my sidebar to not display within the wrapper of my site.

Please bear in mind I am not great at xHTML or CSS, and my coding is far from valid, although I try my best to keep everything clean and organized and as up to par with the W3 as possible. You can find an example page (where the content of the page is not large) where my sidebar simply overflows everything here. Below I have also included my stylesheet, just take it easy on my crappy coding, and any advise on how to make it cleaner and 'crisper' is greatly appreciated, although I am more concerned about this sidebar issue right now.

/*
LAYOUT: Three-Column
DESCRIPTION: Three-column fluid layout with two sidebars on both sides of content
*/

html, body {
background:#000;
color:#000;
font-family:Verdana, Tahoma, Arial, "Trebuchet MS", Sans-Serif, Georgia, Courier, "Times New Roman", Serif;
font-size:12px;
line-height:135%;
text-align:center;
width:1000px;
margin:0 auto;
padding:0;
}

div#wrapper {
background:#000;
background-image:url('images/uiMid.jpg');
background-position:top center;
background-repeat:repeat-y;
width:1000px;
margin-left:auto;
margin-right:auto;
padding:0;
}

div#header {
text-align:center;
background-image:url('images/uiTop.jpg');
background-repeat:no-repeat;
margin-top:-15px;
margin-bottom:-50px;
height:224px;
width:100%;
z-index:5;
}

div#footer {
text-align:center;
background-image:url('images/uiBtm.jpg');
background-repeat:no-repeat;
height:164px;
width:100%;
margin-top:100px;
margin-bottom:20px;
z-index:5;
}

div#frontpage {
height: 315px;
}

div#searchpage, div#postpage, div#articlepage, div#categorypage, div#authorpage, div#tagpage, div#fileattachmentpage, div#imageattachmentpage, div#errorpage {
height: 32px;
}

div#contentMid {
background:#000;
background-image:url('images/contentMid.jpg');
background-position:top center;
background-repeat:repeat-y;
width: 465px;
margin-right: auto;
margin-left: auto;
padding:0;
}


div#contentTop {
text-align:center;
background-image:url('images/contentTop.jpg');
background-repeat:no-repeat;
height:14px;
width:465px;
z-index:5;
margin-right: auto;
margin-left: auto;
margin-bottom: -15px;
}

div#contentBtm {
text-align:center;
background-image:url('images/contentBtm.jpg');
background-repeat:no-repeat;
height:14px;
width:465px;
margin-right: auto;
margin-left: auto;
z-index:5;
}

.blog-title, .blog-description {
visibility: hidden;
}

div#header h1#blog-title {
visibility:hidden;
}

div#header div#blog-description {
visibility:hidden;
}

div#header p.access {
display:none;
}

div#footer span {
visibility:hidden;
}

div#container {
width:470px;
margin-right: auto;
margin-left: auto;
}

h2.entry-title, h2.entry-title a, h2.entry-title a:hover, h2.entry-title a:visited {
text-align: left;
padding-left: 10px;
margin-bottom: 0;
font-size: 13px;
color: #1f4b52;
text-decoration: none;
}

h2.page-title, h2.page-title a, h2.page-title a:hover, h2.page-title a:visited {
text-align: left;
padding-left: 20px;
margin-bottom: 0;
font-size: 13px;
color: #1f4b52;
text-decoration: none;
}

div.entry-date {
text-align: left;
padding-left: 20px;
padding-bottom: 10px;
font-size: 11px;
font-weight: bold;
color: #000000;
}

div.entry-content {
padding: 0 20px;
}

div.sidebar {
text-align:left;
}

div#primary {
position:absolute;
top:180px;
left:20px;
float:left;
}

div#secondary {
position:absolute;
top:180px;
left:718px;
float:right;
}

li.widget{
list-style-type: none;
}

ul.menulist {
margin-left: -40px;
}

h3.widgettitle {
visibility: hidden;
}

h4.topmenuLtitle {
background-image:url('images/navLtop.gif');
background-repeat:no-repeat;
text-align:left;
padding-left: 63px;
padding-top: 5px;
width:184px;
height:33px;
}

h4.menuLtitle {
background-image:url('images/navLbtm.gif');
background-repeat:no-repeat;
text-align:left;
padding-left: 63px;
padding-top: 11px;
width:184px;
height:39px;
}

h4.topmenuRtitle {
background-image:url('images/navRtop.gif');
background-repeat:no-repeat;
text-align:right;
padding-left: -55px;
padding-top: 5px;
width:184px;
height:33px;
}

h4.menuRtitle {
background-image:url('images/navRbtm.gif');
background-repeat:no-repeat;
text-align:right;
padding-left: -55px;
padding-top: 11px;
width:184px;
height:39px;
}

div#primary a,div#secondary a {
color:#e2c891;
text-decoration:none;
padding-left:12px;
font-size:10px;
}

div.sidebar li.leftmenulink {
background-image:url('images/menuLink.gif');
background-repeat:no-repeat;
background-position:0 3px;
margin-left:40px;
}

div.sidebar li.rightmenulink {
background-image:url('images/menuLink.gif');
background-repeat:no-repeat;
background-position:0 3px;


margin-left:35px;
}


div#primary a:hover,div#secondary a:hover {
color:#FFF;




}


div.sidebar li.rightmenulink,div.sidebar ul.toprightmenubutton,div.sidebar li.rightmenubutton,div.sidebar li.leftmenulink,div.sidebar ul.topleftmenubutton,div.sidebar li.leftmenubutton {
list-style-type:none;
}

div#slider {
text-align:center;
background-image:url('images/slider.png');
background-repeat:no-repeat;
position:absolute;
height:357px;
width:500px;
left:249px;
top:165px;
z-index:5;
}

form.contact-form {
padding:0 6px;
}

p {
text-align:justify;
}

img {
border:0;
display:block;
}


a {
color:#8b4f18;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

.hr {
border-bottom:1px dotted #3d2c09;
}

.forms {
background:#f1d28d;
border:1px solid #5b3c1f;
padding:2px;
}

.menuForm {
background:#3e3120;
border:1px solid #ceae79;
color:#FFF;
}

roottoor

Might I add one question to this, as this issue just became apparent to me in Chrome. Why is my site looking proper at 1024x768 and lower, but at higher resolutions, it is not? I am sure it is my position: absolute css, so how can I fix my entire site, sidebar included, to fix this issue?

Fang

If you use position:absolute on an element then it's parent should have position:relative.
Unless an element is given position, z-index will not work.

roottoor

Looking at the hierarchy of my site, what would the parent of my div id='primary' class='sidebar' and div id='secondary' class='sidebar'? I would guess it to be wrapper, but call me ignorant if you please!

Fang

<div id="container" style="overflow:hidden;">
.
.
	</div><!-- #secondary .sidebar -->
    </div><!-- #container -->
	<div id="footer">&nbsp;</div><!-- #footer -->

roottoor

I added a position: relative to my container, and position: absolute to my sidebars, but the entire flow of the site is still not seeing the sidebar as part of it. I was able to fix my resolution issues though, thank God for that... oh, and you Fang! What am I doing wrong here? Here is the updated and fully validated CSS for my site, I need to get this issue fixed, and all it seems I am doing is trying this or that and getting nowhere.

html, body {
background:#000000;
color:#000000;
font-family:Verdana, Tahoma, Arial, "Trebuchet MS", Sans-Serif, Georgia, Courier, "Times New Roman", Serif;
font-size:12px;
width: 1000px;
line-height:135%;
text-align:center;
margin:0 auto;
padding:0;
}

div#wrapper {
background:#000000;
background-image:url('images/uiMid.jpg');
background-repeat:repeat-y;
width:1000px;
margin-left:auto;
margin-right:auto;
padding:0;
}

div#header {
text-align:center;
background-image:url('images/uiTop.jpg');
background-repeat:no-repeat;
margin-top:-15px;
margin-bottom:-62px;
height:224px;
width:100%;
z-index:5;
}

div#footer {
text-align:center;
background-image:url('images/uiBtm.jpg');
background-repeat:no-repeat;
height:164px;
width:100%;
margin-top:100px;
margin-bottom:20px;
z-index:5;
}

div#frontpage, div#welcomepage {
height: 16px;
}

div#searchpage, div#postpage, div#articlepage, div#categorypage, div#authorpage, div#tagpage, div#fileattachmentpage, div#imageattachmentpage, div#errorpage, div#linkspage, div#featuredpage, div#archivespage, div#archivepage {
height: 52px;
}

div#contentMid {
background:#000000;
background-image:url('images/contentMid.jpg');
background-position:top center;
background-repeat:repeat-y;
width: 465px;
margin: 0 auto;
padding:0;
}


div#contentTop {
text-align:center;
background-image:url('images/contentTop.jpg');
background-repeat:no-repeat;
height:14px;
width:465px;
z-index:5;
margin: -15px auto;
}

div#contentBtm {
text-align:center;
background-image:url('images/contentBtm.jpg');
background-repeat:no-repeat;
height:14px;
width:465px;
margin: -13px auto;
z-index:5;
}

.blog-title, .blog-description {
visibility: hidden;
}

div#header h1#blog-title {
visibility:hidden;
}

div#header div#blog-description {
visibility:hidden;
}

div#header p.access {
display:none;
}

div#footer span {
visibility:hidden;
}

div#container {
position: relative;
width:465px;
margin-right: auto;
margin-left: auto;
z-index: 10;
}

h2.entry-title, h2.entry-title a, h2.entry-title a:hover, h2.entry-title a:visited {
text-align: left;
padding-left: 10px;
margin-bottom: 0;
font-size: 13px;
color: #1f4b52;
text-decoration: none;
}

h2.page-title, h2.page-title a, h2.page-title a:hover, h2.page-title a:visited {
text-align: left;
padding-left: 20px;
margin-bottom: 0;
font-size: 13px;
color: #1f4b52;
text-decoration: none;
}

div.entry-date {
text-align: left;
padding-left: 20px;
padding-bottom: 10px;
font-size: 11px;
font-weight: bold;
color: #000000;
}

div.entry-content {
padding: 0 20px;
}

div.sidebar {
overflow: visible;
text-align:left;
}

div#primary {
position: absolute;
top: 215px;
left: 20px;
float:left;
}

div#secondary {
position: absolute;
top: 215px;
left: 718px;
float:right;
}

li.widget{
list-style-type: none;
}

ul.menulist {
margin-left: -40px;
margin-bottom: -20px;
}

h3.widgettitle {
visibility: hidden;
}

h4.topmenuLtitle {
background-image:url('images/navLtop.gif');
background-repeat:no-repeat;
text-align:left;
padding-left: 63px;
padding-top: 5px;
margin-bottom: 5px;
width:184px;
height:33px;
color: #81806d;
}

h4.menuLtitle {
background-image:url('images/navLbtm.gif');
background-repeat:no-repeat;
text-align:left;
padding-left: 63px;
padding-top: 11px;
margin-bottom: 0;
width:184px;
height:39px;
color: #81806d;
}

h4.topmenuRtitle {
background-image:url('images/navRtop.gif');
background-repeat:no-repeat;
text-align:left;
padding-left: 33px;
padding-top: 5px;
margin-bottom: 5px;
width:184px;
height:33px;
color: #81806d;
}

h4.menuRtitle {
background-image:url('images/navRbtm.gif');
background-repeat:no-repeat;
text-align:left;
padding-left: 33px;
padding-top: 11px;
margin-bottom: 0;
width:184px;
height:39px;
color: #81806d;
}

div#ssearch {
margin-left: -34px;
}

div#primary a,div#secondary a {
color:#e2c891;
text-decoration:none;
padding-left:12px;
font-size:10px;
}

div.sidebar li.leftmenulink {
background-image:url('images/menuLink.gif');
background-repeat:no-repeat;
background-position:0 3px;

margin-left:40px;
}

div.sidebar li.rightmenulink {
background-image:url('images/menuLink.gif');
background-repeat:no-repeat;
background-position:0 3px;
margin-left:35px;
}

div#primary a:hover,div#secondary a:hover {
color:#ffffff;
}

div.sidebar li.rightmenulink,div.sidebar ul.toprightmenubutton,div.sidebar li.rightmenubutton,div.sidebar li.leftmenulink,div.sidebar ul.topleftmenubutton,div.sidebar li.leftmenubutton {
list-style-type:none;
}

div#slider {
text-align:center;
background-image:url('images/slider2.png');
background-repeat:no-repeat;
height:357px;
width:500px;
margin: 0 auto;
padding: 0;
}

form.contact-form {
padding:0 6px;
}

p {
text-align:justify;
}

img {
border:0;
display:block;
}


a {
color:#8b4f18;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

.hr {
border-bottom:1px dotted #3d2c09;
}

.forms {
background:#f1d28d;
border:1px solid #5b3c1f;
padding:2px;
}

.menuForm {
background:#3e3120;
border:1px solid #ceae79;
color:#FFF;
}

.metalinks {
margin: 25px auto;
}

Fang

Basically the layout is wrong, this is made worse by using positioning on layout blocks which are then corrected with negative margins.
Generally positioning should only be used on an image or a text element.
I see nothing in the design that would require positioning or negative margins.
Personally, I would start again: http://csscreator.com/tools/layout

roottoor

Bah, I don't desire to completely rewrite the site, with my experience level, it took entirely too long to make it work. Regardless, I found the issue, and was able to completely remove my use of the position attribute from all my elements. I forgot to clear my elements, which kept the content from appearing within its parent elements... Thanks for taking the time to help though, it has pressed me to clean the code more.