css height issues within a div tag

css div height 100%

[periferral]

Hello. I'm working on a redesign on a wordpress theme but I'm having some issues on getting this working as I need. My biggest issue is that the div's are not sized up to the length of the page.

Here are some links to get feedback

<snip>

Here you can see that the post is larger than the sidebar. So the left div runs from the top all the way to the footer. However, the right sidebar ends significantly earlier since it has no more content to display. I added height: 100% to the css but it hasn't helped.

The reverse is also true

<snip>

Here is left content is shorter than the right sidebar and so its cut off before the footer.

Can someone help point out how I can get this working the way I need. thanks in advance

[edited by: swa66 at 2:17 am (utc) on Nov. 12, 2009]
[edit reason] Link weeding, please see ToS and Forum Charter [/edit]

[swa66]

Welcome to WebmasterWorld,

Put a background on the parent to fake the effect you seek.
Search for faux columns if you need an example.

[periferral]

I already have a background image that is repeated within my div. Since the height of the div varies by post size within wordpress, I would need an incredibly large image as well which just means in wasting bandwidth for fake images.

Is there no solution using css?

[swa66]

you can repeat background images: it needs to be just 1px high ...

[periferral]

i looked into this some more and while I understand how this will work, it seems like more my particular scenario, it isn't going to function as needed.
It is really hard to example without having access to the site itself.

<div id="page-wrap1"> 
 <div id="page-wrap2"> 
 <div id="page" class="with-sidebar"> 
 <div id="main-wrap"> 
 <div id="mid-wrap"> 
 <div id="side-wrap"> 
 <div id="mid">  
 <div id="header"> 
 </div> 
 <div id="mid-content" role="main"> 
 </div> 
 </div> 
 </div> 
 <div id="sidebar" role="complementary"> 
 <div id="sidebar-wrap1"> 
 <div id="sidebar-wrap2"> 
 <div id="sidebar-wrap3"> 
 </div> 
 </div> 
 </div> 
 </div> 
 </div> 
 </div> 
 </div> 

I'll try to explain verbally what I can. First, my layout is fluid for both columns. Left is 66% and right is 34%. main-wrap and mid-wrap both are the same div which start from the top all the way to the footer and encompass both the left and right columns.

div mid covers all of the left column. this contains 2 divs ie header which contains the top 200px and mid-content which contains the content within the page.

the sidebar div covers the entire sidebar from the top of the page to the footer.

Now, if I use main-wrap/mid-wrap are the only divs that encompass both the left and right columns in its entirety.

However, putting a background image here means that my background image needs to include the header area as well which means that it cannot be repeated.

Do I have this correct? Are there any workaround to my design? Do i resort to using javascript as a solution to this?

[swa66]

That's an awful lot of divs. Most out here would try to talk you into using far less divs.

However, putting a background image here means that my background image needs to include the header area as well which means that it cannot be repeated.

Dozens of ways to avoid that problem.

Search for "Flexi-Floats" it's a solution by SuzyUK. The example SuzyUK has online uses 2 fixed sidebar, but is should be possible to modify ti to just have one flexible width one.