Jump to content

Stretch Navigation To Containing Container Height


son
 Share

Recommended Posts

give it display: block and width: 100%. I'm not sure if it'll also need position: relative..

Link to comment
Share on other sites

This depends on what sort of layout you have, wrapper, sidebar, main content is what i am guessing, with the main content determining the total height, but side bar does not extend to the bottom.there are several solutions to this, different layout, images to give the illusion side bar extends, to bottom, but we really need to see html code etc to give appropriate solution

Link to comment
Share on other sites

This depends on what sort of layout you have, wrapper, sidebar, main content is what i am guessing, with the main content determining the total height, but side bar does not extend to the bottom.there are several solutions to this, different layout, images to give the illusion side bar extends, to bottom, but we really need to see html code etc to give appropriate solution
At present I have set the wrapper (called content) to repeat on left side (just in right place for nav) an image to give the right color. The issue is that for some reason the image is not repeated past the nav div. I cannot understand why that would be. The code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>testing</title><style type="text/css">#content{background: #252C30 url(sidebar2.gif) repeat-y; position:relative;}#content a:link,#content a:visited,#content a:active{color:#929395;}#content a:hover{color:#929395;}/* - - nav bar on left - -*/#nav {float:left; width:225px; background-color:#EDE7DB; height:100%;}#mainText {float:left;color:#EDE7DB;  width:640px;padding:25px 30px;background-color:red;}</style></head><body><div id="content"><div id="nav"><ul><li><a href="#" title="#">1</a>	<ul>	<li><a href="#" title="#">1a</a></li>	<li><a href="#" title="#">1b</a></li>    </ul></li></ul></div><div id="mainText">test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /></div><br clear="left" /></div></body></html>

Any ideas?Son

Edited by son
Link to comment
Share on other sites

here try this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>testing</title><style type="text/css">#content{background: #252C30 url(sidebar2.gif) repeat-y; position:relative; overflow:hidden; margin:0 auto;}#content a:link,#content a:visited,#content a:active{color:#929395;}#content a:hover{color:#929395;}/* - - nav bar on left - -*/#nav {float:left; width:225px; background-color:#EDE7DB;} /*height: 100%; Not going to work*/#mainText {float:left;color:#EDE7DB; width:640px; padding:25px 30px;background-color:red;}</style></head><body><div id="content"><div id="nav"><ul><li><a href="#" title="#">1</a><ul><li><a href="#" title="#">1a</a></li><li><a href="#" title="#">1b</a></li></ul></li></ul></div><div id="mainText">test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /></div></div></body></html>

Link to comment
Share on other sites

It does now work in IE7 and Firefox (many thanks), but not in IE6 (unfortunately it also needs to work for IE6). Do you have any idea why not? Also, the only difference apart from my using height = 100% on nav is:overflow:hidden; margin:0 auto;I cannot see how the margin of a wrapper div affects the elements inside, with overflow I am not fluent. Could you just explain how this works? This would be great!Son

Edited by son
Link to comment
Share on other sites

margin: 0 auto; i just put in as habit to center a container element, but wont work for this as it uses float.try this<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>testing</title><style type="text/css">#content{background: #252C30 url(sidebar2.gif) left top repeat-y; overflow:hidden; float:left; }/*if you require black border on right use width:100%*/#content a:link,#content a:visited,#content a:active{color:#929395;}#content a:hover{color:#929395;}/* - - nav bar on left - -*/#nav {float:left; width:225px; background-color:#EDE7DB;} /*height: 100%; Not going to work*/#mainText {float:left;color:#EDE7DB; width:640px; padding:25px 0px 25px 30px;background-color:red;}</style></head><body><div id="content"><div id="nav"><ul><li><a href="#" title="#">1</a><ul><li><a href="#" title="#">1a</a></li><li><a href="#" title="#">1b</a></li></ul></li></ul></div><div id="mainText"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </div></div></body></html>

Link to comment
Share on other sites

if you want it centred (without right border, if you require this adjust content width to 100%) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>testing</title><style type="text/css">#content{background: #252C30 url(sidebar2.gif) left top repeat-y; overflow:hidden; width: 895px; /*float:left;*/ margin: auto; }/*if you require black border on right use width:100%*/#content a:link,#content a:visited,#content a:active{color:#929395;}#content a:hover{color:#929395;}/* - - nav bar on left - -*/#nav {float:left; width:225px; background-color:#EDE7DB;} /*height: 100%; Not going to work*/#mainText {float:left;color:#EDE7DB; width:640px; padding:25px 0px 25px 30px;background-color:red;}</style></head><body><div id="content"><div id="nav"><ul><li><a href="#" title="#">1</a><ul><li><a href="#" title="#">1a</a></li><li><a href="#" title="#">1b</a></li></ul></li></ul></div><div id="mainText"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </div></div></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

if you want it centred (without right border, if you require this adjust content width to 100%) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>testing</title><style type="text/css">#content{background: #252C30 url(sidebar2.gif) left top repeat-y; overflow:hidden; width: 895px; /*float:left;*/ margin: auto; }/*if you require black border on right use width:100%*/#content a:link,#content a:visited,#content a:active{color:#929395;}#content a:hover{color:#929395;}/* - - nav bar on left - -*/#nav {float:left; width:225px; background-color:#EDE7DB;} /*height: 100%; Not going to work*/#mainText {float:left;color:#EDE7DB; width:640px; padding:25px 0px 25px 30px;background-color:red;}</style></head><body><div id="content"><div id="nav"><ul><li><a href="#" title="#">1</a><ul><li><a href="#" title="#">1a</a></li><li><a href="#" title="#">1b</a></li></ul></li></ul></div><div id="mainText"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </div></div></body></html>
Will have a go when I am on machine with IE6 (oh my god, so ancient) again. My friend lets me have a go once in a while ...Many thanks,Son
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...