|
CSS - Need Help Solving Div Autoheight Puzzle
Hello!
After hours of searching web and with no result I would like to ask for some advice. There is a space between content and footer which I would like to fill with a div that takes up all of that space. I tried adding height:100% and min-height:100%, but with no luck. Parent div's of this div are also set to height:100% Code: <head> <body> <div id="content_wrap"> <table id="pageLayout" class="pageLayout hideBoth"> <div id="books">Test</div> <div class="push"></div> </div> <table id="footer_table"> Code: html {
height: 100%;
margin: 0;
}
body {
background: url("../images/css_images/bg.jpg") repeat-x scroll 0 0 #E8E8E8;
font-family: Trebuchet MS,verdana,geneva,arial,helvetica,sans-serif;
font-size: 12px;
height: 100%;
margin: 0 auto;
padding: 0;
text-align: left;
}
#content_wrap {
height: auto !important;
margin: 0 auto -30px;
min-height: 100%;
width: 900px;
}
table.pageLayout {
border: 0 none;
height: 100%;
width: 100%;
}
#books {
background: url("../images/css_images/books.jpg") repeat-y scroll right bottom transparent;
height: 100%;
margin: 0 auto;
width: 500px;
}
div in question can be seen here, it contains word ""test" - Site I'm also using sticky footer - link Similar TutorialsHey! I am very exhausted as I have spent a long time trying to solve this seemingly simple issue. I am trying to make a working-centered layout in the following address: http://vivanidesign.com/testing/testz2.html . Everything else is centered (at least on Chrome) besides the four center boxes. How do I get them centered without screwing everything else over? Many times when I've gotten them centered, the footer gets messed up. I don't want to post long lines of untidy code on here, so I hope someone could view the source and tell me how to make the whole layout centered. I would appreciate so so very much! I've tried so many techniques, and none of them seem to be working. But then again, I am an amateur. Thank you so much I am trying to create a menu [css / html]. Home | Live Music | Info | Options | Contact The Live Music tab: live music > hover over to reveal > 970 px wide div containing music styles jazz , blues, soul etc> hover over to reveal> 970 px wide div containing band1, band 2, band 3 etc The Options Tab is a basic drop down menu After several days of comparing / reading / going round in circles, I am stumped and hope someone can provide a very basic css + html for the problem. The bands' div needs to contain a bg image of 970 x 250. I spent a long time doing a similar menu but it doesn't do what I need it to do and is restricted by the css. Help would be really appreciated. TIA This one has me completely baffled. IE6 and 7 are not seeing the following link. This is from the IE6 view source: Code: <div class="corner-login" <a href="/account">Login</a> | <a href="/user/register">Join</a> </div> The word 'login' renders on the left but no link, just dead text. The join link on the right works fine. I cannot for the life of me figure out why. Do you see something that I don't in this code? Anyone have any idea what could be going on? I have a positioning puzzle for you. It's as part of a web design assignment, so broad accessibility is not required. even working on IE is not required. YES! here is the problem, explained by means of an image. because a picture speaks a thousand words. so they say. [IMG](URL address blocked: See forum rules)[/IMG] Any assistance or suggestions are welcome. Thanks in advance. Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm |
|||||||