CStrauss Posted October 18, 2006 Share Posted October 18, 2006 I been practicing more on my CSS skills and trying to accomplish making my navigation or any other div container to streatch 100% of the browser. Now I figured out how to make the wrapper fit 100% of the browser now I want to try to be able to make specific div boxes inside the wrapper also streatch down to the bottom of the page. I been playing with it for days and it seems i can make it work in IE but not other browsers so now im back to square one running out of ideas can someone please look at my code in the sample im providing and explain how to do it it all browsers.Below is code for a 2 column layout with a header and footer. As you can see I have wrapper streatching down the length of the browser that is working okay. Now i want to do the same for the navigation on the right to also streatch down the page. I tried adding the similar code i used for the wrapper but i must not be understanding something when doing that trick to make it work for elements inside the wrapper. Any suggestions??? <!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=iso-8859-1" /><title>2 Col Float Layout</title><style type="text/css">body{text-align:center;}#wrapper{width:720px;margin-left:auto;margin-right:auto;background-color:#CCCCCC;text-align:left;min-height:100%;}/* commented backslashes hack v2 \*/html, body{ height:100%;}* html #wrapper{ height:100%;}/* end hack */#content{width:520px;float:right;background-color:#666;}#content p{padding-right:20px;}#mainNav{width:180px;float:left;padding-top:20px;padding-bottom:20px;background-color:#990099;}#mainNav p{ padding-left:20px; padding-right:20px;}#footer{clear:both;background-color:#33CCFF;} </style></head><body><div id="wrapper"> <div id="header"><h1>This is the header</h1></div><!-- End Header --> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscin</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscin</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscin</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscin</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscin</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscin</p> </div><!-- End Content --> <div id="mainNav"> <p><a href="#">Link 1</a></p> <p><a href="#">Link 2</a></p> <p><a href="#">Link 3</a></p> <p><a href="#">Link 4</a></p> </div><!-- End Main Nav --> <div id="footer">© 2am designs 2006</div><!-- End Footer --> </div><!-- End Wrapper --></body></html> Link to comment Share on other sites More sharing options...
BiteMe Posted October 19, 2006 Share Posted October 19, 2006 try this on the main nav-use a 180x1px transparent gifbackground-image:url(transparent.gif);background-repeat:repeat-y;height:100%;This is a quick fix whilst im between meetings. Will have a look later Link to comment Share on other sites More sharing options...
CStrauss Posted October 20, 2006 Author Share Posted October 20, 2006 Thank you i will give it a try today. I know theres gotta be away just a matter of playing with it. to me it just make more sense to have your nav bar stretch the length of the browser for i noticed most sites have them longer then most content they display on the current page if you know what i mean. What im getting at is people add new links and section to their nav bar so im basicly trying to set it up so regardless of how much content is in the nav bar it will stretch to the bottom of the page to prepare for future additions while at teh same time giving it a more complete look.Anywyas thanks for the tip i will give it a try today and report back what happen. Link to comment Share on other sites More sharing options...
CStrauss Posted October 20, 2006 Author Share Posted October 20, 2006 hmmmm that didnt seem to work as well as I thought it would. It pretty much gave me the same results of I was getting before by adding the 100% to the mainNav div in IE it does push that area down to end of the browser like I want but when tested in other browsers such as FF, Netscape, and Oprea the mainNav area still remains the same until content is added. Again Im trying to achieve the effect of the mainNav area stretching down to the bottom of the browser regardless of how much content is down I will keep playing with it until i figure it out or someone comes up with a working solution thanks for the help attempt BiteMe if you have any other ideas please let me know. Link to comment Share on other sites More sharing options...
ible-white Posted October 22, 2006 Share Posted October 22, 2006 hi CStrauss,try these links and study the source codes.link1link2best regards ok,me! lol.ps- is it what u wanted? Link to comment Share on other sites More sharing options...
CStrauss Posted October 26, 2006 Author Share Posted October 26, 2006 well sorta Ible-white, they are streched the way I like them to be except im looking to have them fill 100% of browser regardless of how much content. Atleast the background I tried putting a background image (blank transparent gif file) but that didnt work. To give a better example of what im trying to do i uploaded my site im working on and here is the link.LinkAs you can see the nav bar on the left doesnt expand all the way down. to fill the empty space. Eventually I will make a nav bar graphic that I would like to fill that entire section so regardless of how much content is in that section it will reach the bottom if you know what i mean. This layout example I found on the net, its actually a 3 column layout that uses the right section as a sub header part beneath the logo. Anyhow I hope this gives every one a better visual example Im trying to achieve. the code has changed since my original code, but can be seen through Fire fox but if you need me to repost the new code. Let me know. Thanks again everyone for your help in trying to help me figure this out. I really appreciate it. Link to comment Share on other sites More sharing options...
ible-white Posted October 26, 2006 Share Posted October 26, 2006 hi CStrauss As you can see the nav bar on the left doesnt expand all the way down. to fill the empty space. Eventually I will make a nav bar graphic that I would like to fill that entire section so regardless of how much content is in that section it will reach the bottom if you know what i mean.i did a lil mock temporary image just so u can see how it looks. i just placed this in your outter classbackground:url(CStrauss_inner_bg.gif) center repeat-y; here is how it looks (i'll delete this after)some other notes from quickly rushing through ur css code:your features, affiliates and site_info id's all have the exact values, so i combined them into one instead (left_nav u can rename it).u don't have to use <strong> in ur html for everyhing u want to bold. just make use of the font-weight in ur css document. (eg. font-weight:800;)in ur body background u have this background-image:url(../images/body_bg5.gif);background-repeat:repeat-y;background-color:#003359; combine them into one like this: background:#003359 url(../images/body_bg5.gif) repeat-y; hope this helped Link to comment Share on other sites More sharing options...
CStrauss Posted October 27, 2006 Author Share Posted October 27, 2006 Thank you so much that worked well, and thank you for the additional tips i will defentatly use them. Again I appreciate the time you took to help me. I hope others read this topic with the same problem and use your knowledge as well. Link to comment Share on other sites More sharing options...
ible-white Posted October 27, 2006 Share Posted October 27, 2006 no problem! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now