I’m working on a site at www.callbrady.com/restore2
The owner wants a background color on the left side navigation to connect all the way from header to footer. I’ve tried a few different techniques, but am not getting it. I was hoping that by setting the navigation div height to 100% that I’d get somewhere, but alas did not.
I appreciate any feedback you can provide!
Hi,
You can never use height:100% in any meaningful manner apart from on the html and body elements to establish a 100% starting point. The css FAQ on 100% height (see my sig) explains the why and wherefore so I won’t go into full detail here but the basics are that you can only set a percentage height on a parent that has a known height and doesn’t depend on its content for its height.
Therefore 100% height is a non starter because even if it does work then it is limited to 100% and will never grow. The similar applies to min-height:100% in that it only works on a parent that has a height defined or else it just defaults to height:auto. In any case you don’t want 100% you want something that starts from here and goes all the way to there - which is not 100% of anything.
The techniques you can use are faux columns (use a repeating background image on the main container to create the illusion of a column); use display:table for ie8+ and create css table cells which can equalise; use one of the negative margin float techniques; or use an absolute overlay.
If you only want to support IE8 plus you can do the absolute overlay method without adding any mark up:
#container{
position:relative;
}
#container:after{
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
}
#container:before{
content:" ";
display:block;
position:absolute;
left:10px;
top:280px;
bottom:37px;
width:220px;
background:red;
z-index:1;
}
#navigation{position:relative;z-index:2;}
Hope that helps
BTW your main container has no height because you didn’t contain the floats.
I’m nearing completion on this project and about to turn if over to another person for updates. I notice that on the web everything looks good, but in Dreamweaver it is ALL OVER THE PLACE, especially in the navigation and content areas. Any ideas?
Dreamweaver shows the navigation in the top right area of the page, and the content in the lower left area.
Dreamweaver can only handle all but the simplest of CSS and design view should never be used as a guide. In fact “don’t ever use design view” but work in “code view” only and preview the code in a real browser (multiple browsers in fact) every time you update a section of code.
Dreamweaver has a good code editor but most of the time its wysiwyg is in fact wysiwtf
Good advice.
WYSIWTF… I laughed… Never heard that one before.