son Posted September 28, 2009 Share Posted September 28, 2009 I simply want the left sidebar to stretch the total width of container it is in. How is the best way to achieve this? I have tried few, but all not very good...Son Link to comment Share on other sites More sharing options...
chibineku Posted September 28, 2009 Share Posted September 28, 2009 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 More sharing options...
son Posted September 28, 2009 Author Share Posted September 28, 2009 give it display: block and width: 100%. I'm not sure if it'll also need position: relative..Sorry, Have to correct myself. Meant 'height'...|-)Son Link to comment Share on other sites More sharing options...
dsonesuk Posted September 28, 2009 Share Posted September 28, 2009 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 More sharing options...
son Posted September 28, 2009 Author Share Posted September 28, 2009 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 solutionAt 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted September 28, 2009 Share Posted September 28, 2009 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 More sharing options...
son Posted September 28, 2009 Author Share Posted September 28, 2009 Does not repeat image to the bottom end of content. Did it work for you?Son Link to comment Share on other sites More sharing options...
dsonesuk Posted September 28, 2009 Share Posted September 28, 2009 yep! worked for me (IE7 and firefox), make sure image link/name/extension is correct and matches exactly, make sure image is in the same directory as page. Link to comment Share on other sites More sharing options...
son Posted September 28, 2009 Author Share Posted September 28, 2009 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted September 28, 2009 Share Posted September 28, 2009 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 More sharing options...
dsonesuk Posted September 29, 2009 Share Posted September 29, 2009 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> Link to comment Share on other sites More sharing options...
son Posted September 29, 2009 Author Share Posted September 29, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.