Help making CSS make the max height.

Discussion in 'Web Design and Development' started by Cabbit, Mar 12, 2011.

  1. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #1
    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.
     
  2. angelwatt, Mar 12, 2011
    Last edited: Mar 12, 2011

    angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
    Code:
    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.

    Code:
    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;
    }
     

    Attached Files:

  3. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #3
    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.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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.
     
  5. level1kid macrumors newbie

    Joined:
    Feb 27, 2011
    #5
    you could try:

    div.searchdiv{

    height:100%;

    }

    but i have never tried that before (also 100% is relative to the container aka a div)
     
  6. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #6
    Indeed 100% height is one of the first things i tired without success.
     
  7. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #7
    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.
     
  8. level1kid macrumors newbie

    Joined:
    Feb 27, 2011
    #8
    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:confused:
     
  9. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #9
    Thanks for the suggestions so far, seems to be quite tricky to get this.
     
  10. SailorTom macrumors regular

    Joined:
    May 15, 2008
    #10
    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
     

Share This Page