Help making CSS make the max height.

[Cabbit]

http://cabbit.co.uk/blog.html

Above is a demo of the page i am having problem with, what i want to do is make the search area go all the way to the bottom of the page and grow to always be as such.

 

[angelwatt]

I think I got what you want, but unfortunately I tweaked a little here and there too much and so I'm not completely sure what all I changed. I'm attaching a screen shot of the result in Firefox 4 RC1. As a note, the page doesn't look right in Opera 11. The background gradient color on the body is what's off.

Here's the aside, which was the crucial part. This is only what I added to the existing styles.

aside {
  bottom: 0;
  position: absolute;
  right: 8px;
  top: 148px;
}

Other notables, I removed the float from most elements, I think I removed a overflow item and tweaked some margin-bottom. I'll see if I can reproduce the changes I made to get this. I don't know how well this would work on other browsers either.

Edit: Made notes this time. Below are all of the changes I made while using FireBug. Lines starting with - means the property was removed, + mean added, * means modified. I also verified this works in Safari.

aside {
	-float: right;
	-margin-bottom: -2000px;
	-padding-bottom: 2000px;
	+bottom: 0;
	+position: absolute;
	+right: 8px;
	+top: 148px;
}
body > div#container > section#main {
	-overflow: hidden;
	-padding: 0 0 2em;
	*min-height: 200px;
	-margin-bottom: 2em;
}
header {
	-float: left;
}
nav#mainNav {
	-float: left;
}
nav#subNav {
	-float: left;
}

 

[Cabbit]

Does do a what i want but removing my floats kinda makes a gap between the nav and sub nav. Though adding in some floats makes the sidebar move again so i'll need to sort out this gap.

 

[angelwatt]

Does do a what i want but removing my floats kinda makes a gap between the nav and sub nav. Though adding in some floats makes the sidebar move again so i'll need to sort out this gap.

You should be able to manage the gap with appropriate margin/padding on elements. I rarely find a need for floats. They have their uses of course, but I just tend not to use them preferably. It was probably caused by all of those IE6 float issues.

Anyways, if you update your demo page and explain the gap more precisely I can try to help you figure out a solution.

 

[level1kid]

you could try:

div.searchdiv{

height:100%;

}

but i have never tried that before (also 100% is relative to the container aka a div)

 

[Cabbit]

Indeed 100% height is one of the first things i tired without success.

 

[manueld]

The easiest way i found to do this is just create a background image on your id of "main" that has the color block and repeat-x. Especially if that side panel is going to continuously have varying content therefore sizes.

 

[level1kid]

all i can think of is to redo the whole aside thing.

or try to expand the div by placing 20x <br /> under make new blog

but i dont know

 

[Cabbit]

Thanks for the suggestions so far, seems to be quite tricky to get this.

 

[SailorTom]

I suggest you re-factor your html. Move the aside below the section in the html. Float the section to the left with a specified width e.g 70%. The remove the clear from the aside and it should then slot into place with height maxed out.

I'd expect setting height: 100% would work with this method too, but it didn't for me in the little play I had.

Anyway it seems the main problem you have at the moment is that the section is limiting the height of the aside