I'm having a hard time trying to figure this out. Maybe I'm asking too much from this CSS layout?

First thing's first: I'm creating a webpage which is exactly the same layout as the one I created for this demonstration. The one I'm working on is not live yet. The problem of course was recreated in the demo version.

Basically, the entire layout seems to work except for one div that just won't function the way I want it to. The div I'm referring to is the "sidebar" div. This div has three additional divs within it, as you can see. The div within the "sidebar" div that I'm mainly concerned with is the "body" div. What should happen is that the entire sidebar should expand to fit the vertical space below it (meaning, it should expand with the parent div "wrapper"). It should do this dynamically when I add new content to the "wrapper" div. The wrapper div also expands dynamically. But here's the catch: the sidebar itself should not expand due to its own property. Rather, the sidebar should expand when the "body" div expands. So in essence, the body div is the one that should have the property of "height: 100%" or whatever, but that is exactly the problem: No matter the property I add to the "sidebar" div or the "body" div, the parent div (sidebar) will not budge. I don't know what is holding it back but I have a feeling it has to do with all the floats involved in this layout.

I made this layout too complicated for myself and I just don't know what to do to fix it. I have spent hours.

Any help will be appreciated.

Thanks

09-28-2012, 05:09 AM

fireplace_tea

Hi Clone,

The first thing I notice is you made your CSS more complex then it needs to be. The neat thing about using the ID selector is that you can access it directly. For example, in your coding you have:
#wrapper #sidebar #top{
height: 150px;
background-color: #69C;
}

You don't need to go through the wrapper and sidebar first. You can more easily access the id "top" by just doing this:
#top{
height: 150px;
background-color: #69C;
}

I believe height is a property not often used because it tends to not always behave well. To do what you are looking for try using pixels only, not using any percentages for height. I'm still looking at your coding.

Fireplace_tea, thank you for the advice. I actually did know that except the reason I organize my CSS that way is so that I can easily trace the child elements through the parent elements. I just work a little differently. Thank you again for the advice though.

transybao, can you please explain as to what you see in this code? The #wrapper:after code is actually present in my original page. The reason that is there is because the "wrapper" div's background image was not displaying for whatever reason. I searched online and someone else was having the same problem. A person suggested that following code and as soon as I applied that, the background image came up immediately, though nothing happened to the layout. I honestly don't know why or how it works but it worked great for me. Is there something that is alarming to you in that specific code?

Thanks

09-28-2012, 06:24 AM

fireplace_tea

Hi Clone,

The height property is not an inheritable property. Meaning that the sidebar div will not expand to fit it's parent div height, because it can not inherit it's parent's height property. The below I got from w3schools.com website:

The height property sets the height of an element.
Note: The height property does not include padding, borders, or margins!
Default value: auto
Inherited: no
Version: CSS1
JavaScript syntax: object.style.height="50px"

I also redid your CSS and HTML layout for your page. It's less complex and gets the job done. I made the max width 960px, which you can change.
Here is the HTML:

The first line of javascript code sets the height of the body (the parent of sidebar). I just set it to 600px for the example.
The second line of javascript code gets the sidebar id and puts it in the variable b.
The third line of code sets the sidebar height to equal the body height.

Third, link the JavaScript file in your html file as such:

Code:

<div id="footer">footer</div>

<script src="testing1.js" type="text/javascript"></script>

</body>
</html>

Enjoy!
Julie

09-30-2012, 08:17 AM

cl0ne

Thanks again for the wonderful reply.

I don't know a thing about javascript so my mind never went that way. It's definitely a great alternative.

Having said that, I wanted to clarify a bit more of what I'm trying to achieve so that you can offer a better solution through javascript or even CSS (not that your solution is not good). I just need to clarify some things.

For better illustration, I'm using jsfiddle so that you can see exactly where I'm having the issue.

What I'm trying to do I don't think applies to the "body" tag. Most of the divs, as you may have noticed are within the "wrapper" div. The "wrapper" div in turn is within the "mainWrapper". At this point, I'm thinking the "body" tag cannot really affect the adjustment I'm trying to make.

If you look at the layout in jsfiddle, you can see that the wrapper is fairly long. This is mainly because of the content within the wrapper. But the sidebar, as you can see is pretty much a set size and has a lot of vertical space below. What i want is for the sidebar to fill that space. BUT the sidebar div itself should not be the one with any given expansion property (i.e. height 100%, min-height, etc). The "body" div within the sidebar is actually the one that will have all the content. This body div is the one that needs to expand until the entire sidebar hits the "footer" div at the bottom and stops. At that point, if I fill the body div with content it should just keep expanding with the wrapper div.

Really, all the focus here is on the relationship between the wrapper, the sidebar and the body div.

Please let me know what you make of this.

Thanks!
I really appreciate your effort!

09-30-2012, 11:43 AM

Sammy12

Quote:

Originally Posted by fireplace_tea

The first thing I notice is you made your CSS more complex then it needs to be.

The "body" div within the sidebar is actually the one that will have all the content. This body div is the one that needs to expand until the entire sidebar hits the "footer" div at the bottom and stops. At that point, if I fill the body div with content it should just keep expanding with the wrapper div.

Technically that is not possible to do in CSS. The height of the parent is "artificial." You can't take 100% of any artificial height. It is actually possible, but I wouldn't say it's a correct method and involves some pretty frowned upon stuff.

Here are two layouts. The first changes the height of the middle as the height of the main column increases. The other changes the height of the main column as the height of the side bar increases. You cannot have both of them contributing to the height if they incease. You can only accomplish this with JavaScript by detecting the height of the parent and applying it to the children.

I went over my code again and after giving much thought to where the content will go, realized that there is no need for a symbiotic relationship between the "wrapper" div and the "sidebar" div. Really, the only thing that matters is that the sidebar div's height should match that of the wrapper div.

Being the wrapper div, it holds all the content, which includes the sidebar.
So if anything is going to expand due to more content, it's going to be that wrapper div. The sidebar is supposed to just hold some navigation items so it will most likely not get filled up. But the reason I'm so insistent on having the entire sidebar match the height of its parent div (wrapper) dynamically is because there is going to be a background image on the "body" div. I think this is where I'm maybe asking for too much?

The sidebar div has three divs within it: top, body, bottom. I'm distributing the same background image over these three divs. The top and bottom divs will only have a small portion of the top and bottom of the image, respectively. But the body div will hold the rest of the image (the middle portion) and this image will have a tremendous height (like 6000 pixels). So essentially, when the wrapper div grows over time or even shrinks, the sidebar div should increase/decrease in size proportionally. But the kicker is that the expansion should happen through the body div but must affect the sidebar (naturally since the sidebar div is the parent div).

My limited knowledge cannot comprehend how this can happen and I'm sorry if this is too much trouble for you guys. I'm guessing only javascript can make this happen, though I'm not even sure if javascript will be welcome in the environment this is intended for. This will be used for eBay.

Do you guys think I should just change my layout?

I really love what I'm trying to do but if it's not going to work, it's not going to work.

fireplace_tea, maybe your javascript code, with a little bit of modification, is what I'll need to do?

Maybe Sammy12 can help in this regard?

Thank you for such a big help!

10-02-2012, 12:43 AM

jamaks

Hi, this should give you a few ideas. You are not able to get your sidebar body in one go but I can give you it in two.

I have taken the liberty of renaming some of the elements to make the coding easier to rebuild and done away with your margins. The top part of sidebar body is controlled by the height of div id right and as long as you are placing at least this ammount of content the second part should act as you require. Have fun with it. Jim

10-02-2012, 08:29 AM

cl0ne

Thank you jamaks for taking the time out to help.

I tried your code out and found something that was not quite right. When I put the cursor in front the text in the sidebar and began to hit "enter"(creating paragraphs), the divs to the right, starting from "Div One" all started going down, leaving white space above it.

Could this be cause of the clear property?

Also, will this layout not work with a single column of the sidebar instead of having two sidebars combined?