Hello, How can I get div#container to auto adjust to the length of the content? Some pages are short and some are longer that the screen depth. At the moment I have the following code. Should I also have a div.container? I'm really not experienced enough to know what to put in the div id and what to put in the div class. I hope that I haven't missed this question in a previous post and so wasting time. thank you entity body { font-family: "Georgia", "Times New Roman", Times, serif; background-image: url("../../images/bg2.jpg"); font-size: 0.8em; text-align: center; margin: 0 auto; background-repeat: repeat; background-attachment: scroll; } div#container { position: relative; text-align: center; width: 980px; margin-left: auto; margin-right: auto; height:860px; background-color: #E2F1EC; background-repeat: repeat; background-attachment: scroll; }
body { font: 0.8em "Georgia", "Times New Roman", Times, serif; background: url("../../images/bg2.jpg"); text-align: center; margin: 0 auto; } div#container { position: relative; text-align: center; width: 980px; margin-left: auto; margin-right: auto; background: #e2f1ec; overflow: hidden; } Your CSS is a bit redundant, you should spend some time to learn, make it tidy and clear.
Thank you for that contribution, myst_dg. I have made the minor changes that you suggested by removing (background-repeat: repeat; background-attachment: scroll. Wiping off height:860px; and adding overflow: hidden; didn't work. My whole page disappeared. As I haven't been a member for long enough to post a URL I will have to try and explain myself a bit better about the page that I am trying to make the #container background continue to the end of the content instead of stopping at 860px. The #content of my longest page exceeds 860px and the container stops at my random figure of 860px. I use Firefox to test my pages as somehow IE distorts "the big picture". thanks again entity
Try this, tested on IE6~8 and Firefox3.5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>index</title> <style type="text/css"> body { font: 0.8em "Georgia", "Times New Roman", Times, serif; background: #ccc; text-align: center; margin: 0 auto; } div#container { text-align: center; width: 980px; margin: 0 auto; background: #e2f1ec; overflow: hidden; } </style> </head> <body> <div id="container"> <p> asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br /> asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br /> asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br /> asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br /> asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br /> asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br /> asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br /> asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br /> asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br /> asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br /> </p> </div> </body> </html> Code (markup): You can change the codes inside div#container to find out what's wrong with your page.
Normally, that's the default behaviour. Normally, static blocks adjust their height to the height of their content. This is called height: auto even if you don't explicitly list it, as it's a default. Which tells us you likely had floats inside. While ordinary static boxes adjust to ordinary static content inside them, ordinary static boxes do NOT adjust to any floats inside them, because it's as if they cannot see the bottoms of those floats. In fact, they can't see the floats at all. myst's new code has added overflow: hidden to the code. What this is, is a nice trick to make a static box "see" its floated children. This is because when you tell a static box that it has to deal with overflow, the rules must change so that it can see its content (otherwise, how could it know whether the content's overflowing or not?) and so can now see the content, and enclose it. That link explains other ways to enclose floats, because there are times when you don't want to use overflow (it has a Day Job, and we're using it as a Moonlighting Job : ) Overflow also triggers Haslayout in IE7, so it works in IE7. Overflow doesn't trigger Haslayout in IE6, but your width statement is doing that for you right now. So it is also working in IE6 now. Those weren't causing any problems, but were the redundancy myst was talking about. "scroll" and "repeat" are defaults for background images, so not mentioning them is less code and the same behaviour you want. And if you did need to have that image do something different, you can keep your code slim by using the shorthand for background: background: #colour url(../../images/bg2.jpg) repeat-y fixed; where #colour is either your named colour or your hex value.
WOW! Thank you myst_dg and Stomme poes. I think I am a little bit out of my depth here. I will try what you have suggested but I think the problem may be what I haven't declared about my page. I am using Expression Web because I do not know enough about coding to design from scratch. (I mostly use the code area not the WYSIWYG design area). I have a Dynamic Web Template. I also have a vertical navbar from Sothink DHTML Menu. Could all this javascript be affecting it? Anyway, when I am permitted, I will post the URL of the troublesome site. thank you again, I will keep trying entity
It's possible there's other stuff going on in your page, but the symptoms you described really do sound like unenclosed floats. If myst's overflow method works then you know that was the problem. DHTML menus are not a good idea, mostly since you can never assume every has javascript or can use javascript correctly, but I understand why you're using it. It is possible to have a working dropdown menu which is CSS-only (except you do need Javascript for IE6 because of poor CSS support) and are more accessible, so you know. But maybe that's something to look at later. You'll have trouble learning the ins and outs of web page building while using a wysiwyg, even in code view, since the robot is cheerfully trying to help you write the code, and robots write code the same way they dance: very awkwardly at best. However if this is just your one single web site you want done, then you are the person this software was meant for, and don't stress too much over it. I've been learning, wow, I think 3 years now, and it never stops.
Look at this: http://www.cssplay.co.uk/menus/final_drop.html Code (markup): Pure css multi-level dropdown menu, works very well on stupid IE6. This is amazing and inspires me a lot.
The invalid tables (but cleverly hidden from the validator) and the messy spaghetti css turned me off Stu's dropdowns 2 years ago. I found the Sons of Suckerfish easier to "see" and edit. Since I build to make up for any JS (or mobility) deficiency, no JS for IE6 users isn't a showstopper (if it was, then yes I'd use the nasty tables). The guy is brilliant, but I do not touch his "experiments", which are best looked at in aw, from behind thick glass. You know, the ones he does on that island, where he mixes man and beast... muhahahaha... yes, Igor, to the lab! To the lab, my pretties! MuHAHAHAHAHHAHAHAHAHAHA....
I tried myst's code and added one thing at a time; first the masthead - OK; then the content - OK; and as soon as I added the left menuPane, things went haywire again. I have left the height in div#container so that something works at least. http://users.tpg.com.au/roegreen/greatwar.htm Code (markup): @import url('fonts.css'); body { font-family: "Georgia", "Times New Roman", Times, serif; background-image: url("../images/bg2.jpg"); font-size: 0.8em; text-align: center; margin: 0 auto; } div#container { position: relative; text-align: center; width: 980px; margin-left: auto; margin-right: auto; height:860px; background-color: #e2f1ec; } div#menuPane { position: absolute; left: 8px; top: 133px; width: 20%; } div.menu{ display: block; font-size: 14px; margin: 10; padding: 0; border: 0px solid #853A69; } div#content{ position: absolute; top: 135px; height: auto; left: 21%; width: 760px; background-color: white; padding: 2px; margin-right: 0px; } div.content { width: 750px; word-wrap:normal; margin-right: 10px; padding: 0px; border: 2px solid #ffffff; background-color: #ffffff; } div#content1 { width: 410px; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; padding: 10px; border: background-color: #fff; } div.content1 { width: 400px; margin-right: 10px; padding: 0px; border: 2px solid #ffffff; background-color: #ffffff; } div#content2 { width: 305px; left: 50%; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; padding: 10px; border: background-color: #fff; } div.content2 { width: 300px; margin-right: 10px; padding: 0px; border: 2px solid #ffffff; background-color: #ffffff; } div#masthead { text-align: center; margin: auto; padding: 0; } ul.inside { list-style-position: inside; list-style-type: none; } ul.outside { list-style-position: outside; list-style-type: none; } ul.linone { list-style-type: none; } ul.linone1 { list-style-position: outside; list-style-type: none; color: #4f4f4f; } h6 { color: #408080; } h5 { color: #408080; } h4 { color: #408080; } h3 { color: #408080; } h2 { color: #408080; } h1 { color: #408080; } .imgstyle1 { margin: 3px 10px; border: 0px; text-align: center; } a { color: #408080; text-decoration: none; } a:hover { color: #408080; text-decoration: none; }. Code (markup):
Looks like you used position to place all your boxes, quite different from what I supposed. I think floating them is a better way other than positioning, which is... somehow alternative. You may check this link: http://www.w3.org/TR/CSS2/visuren.html Code (markup): to find out difference between floating and positioning Also this for some basic information about box model, if needed: http://www.w3.org/TR/CSS2/box.html Code (markup): or search for some other tutorials about these topics. Btw, your site is really interesting, good luck!
Agreed; I'd call setting all the large chunks of the page with positioning as "brittle". It's like riding a horse to get somewhere, but also while trying to tell it where to set each footstep. Inefficient and frustrating, unless you're doing an Andy Clarke thing.
I did as you suggested and replaced position: with float: and "hey presto!" it worked. Thank you both so much. entity