So I have had this issue for quite some time and have always thrown it on the back burner as nothing that I need to worry about, but now that I am trying to fix it I am having nothing but problems. My "container" DIV will not expand with the height of the divs in it. I want the image to fill to the bottom of the content within it. This is my attempt at a remake. (You can view the live(older) site at http://www.redplanetanime.com the div "whiteback" is the one that is not expanding down) The reason I went to remake it was because I though by using position: absolute was the reason I was having problem, obviously its not. Here is my remade HTML <!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> </head> <body> <div id="container"> <div id="header"> <div id="navpos"> <ul class="topnav"> <li><a href="index.html">Home</a></li> <li> <a href="serieslisting.html">Anime</a> <ul class="subnav"> <li>Genres(Coming Soon)</li> <li>Movies(Coming Soon)</li> <li><a href="#">Top List</a></li> <li>Currently Airing(Coming Soon)</li> </ul> <span></span></li> <li> <a href="#">Manga</a> <ul class="subnav"> <li>Genres(Coming Soon)</li> <li>Top List(Coming Soon)</li> </ul> <span class=""></span></li> <li><a href="#">Forums</a></li> <li><a href="search.php">Search</a></li> <li><a href="#">Login</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> <div id="main"> </div> <div id="footer"> </div> </div> </body> </html> Code (markup): And the CSS @charset "utf-8"; /* CSS Document */ /* Full Page Tags */ * { margin: 0; padding: 0; } @font-face { font-family: "Prozak"; src:url(../fonts/Prozak.ttf) } body { font-family:Prozak; background-image:url(../images/bg.png); border-top: 3px solid #00C6FF; border-top-width: 3px; border-top-style: solid; border-top-color: #00C6FF; } #container { width: 980px; margin: auto; background-image:url(../images/main_bg.jpg) } /* Header */ #header { background-image:url(../images/header_bg.gif); height: 100px; width: 1000px; float: left; } #dev7link { position:absolute; top:0; background-image:url(../images/dev7logo.png); width:60px; height:67px; display:block; left:50%; margin-top:3px; margin-left:-545px; z-index: -9999; } /* <---------------------- Nav CSS START -----------------------> */ #navpos { float: left; width: 960px; height: 47px; } ul.topnav { list-style: none; padding: 0 20px; margin: 0; width: 920px; background: #222; font-size: 1.2em; font-family: Prozak; background: url(../images/topnav_bg.gif) repeat-x;; } ul.topnav li { float: left; margin: 0; padding: 0 15px 0 0; position: relative; /*--Declare X and Y axis base for sub navigation--*/ background-image:none; } ul.topnav li a{ padding: 10px 5px; color: #fff; display: block; text-decoration: none; float: left; } ul.topnav li a:hover{ background: url(images/topnav_hover.gif) no-repeat center top; margin-top:3px; } ul.topnav li span { /*--Drop down trigger styles--*/ width: 17px; height: 35px; float: left; margin-top: 5px; background: url(images/subnav_btn.gif) no-repeat center top; z-index:10; } ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/ ul.topnav li ul.subnav { list-style: none; position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ left: 0; top: 35px; background: #333; margin: 0; padding: 0; display: none; float: left; width: 170px; border: 1px solid #111; z-index:10; } ul.topnav li ul.subnav li{ margin: 0; padding: 0; border-top: 1px solid #252525; /*--Create bevel effect--*/ border-bottom: 1px solid #444; /*--Create bevel effect--*/ clear: both; width: 170px; z-index:10; } html ul.topnav li ul.subnav li a { float: left; width: 145px; background: #333 url(images/dropdown_linkbg.gif) no-repeat 10px center; padding-left: 20px; z-index:10; } html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/ background: #222 url(img/dropdown_linkbg.gif) no-repeat 10px center; z-index:10; } /*<---------------------- Nav CSS END -----------------------> */ Code (markup): Please help before there is a shootout in a small town in the southern USA lol.
Of course it doesn't. Elements are *never* to expand to contain floated elements. I haven't tested it but add 'overflow:auto' to the container div to see if that fixes it.
Maybe its that I misunderstand how divs are used then. I was looking at another site and it had a container div with the exact same css elements I used but seemed to have the same effect. Must have missed something. I will test with overflow and see if that works. Nope, sadly overflow didn't seem to do anything. I will continue looking for a solution. If anyone suggests a different way of trying that would have the same results I'm more then willing to hear it! Thanks.
If overflow: hidden; doesn't help, then try the following CSS alternative: float: left; width: 100%; Code (markup):
Well... I fixed it; I think, no idea how though. Heres what I added and changed. html { height: 100%; width: 100%; min-height:100%; } #container { width: 1000px; height: 100%; min-height: 100%; background-color: #666; margin: 0 0 0 100px; float: left; } Code (markup):
Most times overflow works but it depends on the markup. As @Clive showed, floating the parent is the next attempt. But when you use percentages to set a height, you always have to think to yourself "percent of what?". It's always the parent of the element. So if you set #container to 100%, it's 100% of its parent so what is the parent set to? Eventually something has to have an actual value assigned to it until you get to the root which is always set to the height of the viewport of the browser.
Yea, I think this is why a lot of the older HTML developers don't switch over from tables, you go from something that's very ridged and what you put in is what you get to something that while having a lot of more potential, its a lot harder to learn. I was told by a friend not to use divs but I think I like the way it makes the code look. Thanks to both of you for helping me figure out the problem. I'm glad I went back and recoded my layout so it all works like it should and's not held together with e-ducktape. +Rep to both of you (Although I can't rep drhowarddrfine because I already gave him some a few days ago when he helped me , nice sig BTW, I think I will just put a popup on my page, that if they are using internet explore, says "Your browser is inferior and unsecure, please use Chrome, FireFox or another browser to view this site properly" )
It was more along the lines of use tables to position your things like he does. I wouldn't call him a idiot he's much better at this then me, although I just started learning a month ago.
Wow, that's some problematic code -- MULTIPLE DIV for NOTHING (DIV#header and DIV#navPos), elements that are too big for their container (#container 980px, #navPos 1000px -- do we see a problem here?)... completely unneccessary classes (like .subnav), and in general, well... It reeks of trying to make a design and layout before you even have semantic markup of your non-presentational content. I'd say your problem isn't DIV, the problem is you're diving for them before you even have content (or a reasonable facsimile) with tags to say what things are instead of what they're going to look like. Though that's kind of a given with the tranny doctype. Nothing like being in transition from 1997 to 1998.
Not quite everywhere, not quite by everybody. Using divs to build a visual table is a worse scenario. If you wish to display tabular data on the page, like a list of X columns and Y rows, a price list or whatever, a <table> tag is the best option to go for. If you go got div's instead, you may end up earning yourself, needlessly, a sleepless night until you get a perfectly working layout.
My point about "everywhere" means some people seem to want to treat it as something not quite the same as every other html element when, in fact, it's a html element like everything else in the book.
I just started learning all of this and knew nothing less then a month ago so all in all the fact that you can view a page that I made is amazing in itself. I have redon my website and would love to see what you think now. I think it's a lot better but be easy on me because I am new. I post here because I seek the advice of more experienced people like the ones in this post. I don't know if I have posted my link and I don't want to see a link whore so if you are interested I will post it again. I am on my iPhone if I have posted it add /new/ to the URL to see. Thanks
Well, I'm out of town and it's late, so I'm not looking too closely, but I think your current markup is pretty good, as well as how it renders. One thing, though, ending a html element with '/>' is for XHTML, not HTML. Remove the slash for the link and img elements. You also have it at the end of one of your anchor start tags.
Ah! Thanks, another question. I was reading online about validators like this (http://validator.w3.org/) and was wondering if they do the same as to check your code for small errors like the ones you pointed out. I go through the browsers and fix the errors that it says I have but thats about the extent of my syntax checking other then what the program I type tells me I did wrong (Like missing a { or something)
Yes. Use it early and use it often. It's the first thing I do when someone asks about problems on their web page and the first thing I do as I create my own work. iow, after writing a section and I want to test it out, I might look at it, then validate, or vice versa. After you've done this for a while, you won't need to do it as often, but you always want to check it at some point.
Starting out the validator will tell you when you are not writing HTML -- since if you have enough 'mistakes' that don't pass the validator it isn't HTML, it's gibberish; having it basically teach you what's gibberish and what isn't is an excellent first step... Though it's by no means a cure-all - it's just another important step along the path to building a site properly. There are other things that looking at your site indicate you've not entirely grasped what a number of tags are actually for. Take headings for example. You've got a H1 through H4... but the problem is none of them are the start of subsections of the previous heading; in fact, they ALL should be H2 as they're all kin to each-other. What you've done there is said that the entire page is "Recent Updates" (h1), and that "Top Anime" (h2) is a subsection of that, "Top Manga" (h3) is a subsection of "top Anime" and "This Season" (h4) is a subsection of "Top Manga"... which is not what you have. It's likely also why you have classes on those headings for no good reason... headings should fan out like a tree as the start of subsections of the higher order (lower numbered) heading preceding it... you don't just number them from top to bottom... mind you, that order is entirely valid HTML which is why I bring it up -- and it would sail right past the validator... It's also why I pretty much use the site logo on a image replacement over text as my H1, since it's the parent of all subsections of the page. (and why the people who use it for the topmost subsection/topic as a H1 are also screwing it up). Your page is a perfect example of this as you should only have one H1 per page -- and they're all structurally siblings -- so they should all be h2. The massive use of separate CSS files and incomplete media stacks are also problematic.... the vague filenames (style.css?) not helping matters either. Which is why I'd swing a giant axe at ALL the javascript, (even if just temporarily for debugging/dev) and work the HTML down to: <!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" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Anime Seven </title> </head><body> <div id="pageWrapper"> <h1> <a href="/"> Red Planet Anime <span><!-- image replacement --></span> </a> </h1> <ul id="mainMenu"> <li> <a href="index.html">Home</a> </li><li> <a href="serieslisting.html">Anime<span></span></a> <ul class="subnav"> <li>Genres(Coming Soon)</li> <li>Movies(Coming Soon)</li> <li><a href="#">Top List</a></li> <li>Currently Airing(Coming Soon)</li> </ul> </li><li> <a href="#">Manga<span></span></a> <ul class="subnav"> <li>Genres(Coming Soon)</li> <li>Top List(Coming Soon)</li> </ul> </li><li> <a href="#">Forums</a> </li><li> <a href="search.html">Search</a> </li><li> <a href="#">Login</a> </li><li> <a href="#">Contact Us</a> </li> </ul> <div id="content"> <ul id="imageRotator"> <li> <img src="images/s01.png" alt="" /> </li><li> <a href="#" title="This is obviously image #2... :P"> <img src="images/s02.png" alt="" /> </a> </li><li> <img src="images/s01.png" alt="" /> </li><li> <img src="images/s02.png" alt="" /> <div> <strong>This</strong> is an example of a <acronym>HTML</acronym> caption with <a href="#">a link</a>. </div> </li> </ul> <div id="recentUpdates" class="subSection"> <h2>Recent Updates</h2> <ul> <li>Ao no Exorcist</li> <li>Beelzebub</li> <li>Blade</li> <li>Bleach</li> <li>Blood-C</li> <li>Cardfight! Vanguard</li> <li>Dantalian no Shoka</li> <li>Fairy Tail</li> <li>Gintama (2011)</li> <li>Gyakkyoi Vurai Kaijii: Hakairoku Hen</li> <li>Hana-Saku Iroha</li> <li>Ikoku Meiro no Croisee</li> <li>Itsuka Tenma no Kuro Usagi</li> <li>Kamisama Dolls</li> <li>Kamisama no Memo-chou</li> <li>Mawaru Penguin Drum</li> <li>Mayo Chiki!</li> <li>Morita-san wa Mukuchi</li> <li>Naruto Shippuuden</li> <li>Natsume Yuujinchou San</li> <li>Nekogami Yaoyorozu</li> <li>Nichijou</li> <li>No. 6</li> <li>Nurarihyon no Mago: Sennen Makyou</li> </ul> <!-- #recentUpdates.subSection --></div> <div id="topAnime" class="subSection"> <h2>Top Anime</h2> <ul> <li>Ao no Exorcist</li> <li>Fairy Tail</li> <li>Naruto Shippuuden</li> <li>Bleach</li> <li>Mayo Chiki!</li> <li>Kaichou wa Maid-sama!</li> <li>Steins;Gate</li> <li>Sacred Seven</li> <li>Angel Beats</li> <li>Kami nomi zo Shiru Sekai: 4 nin- to Idol</li> </ul> <!-- #topAnime.subSection --></div> <div id="topManga" class="subSection"> <h2>Top Manga</h2> <ul> <li>Naruto</li> <li>Beelzebub</li> <li>Fairy Tail</li> <li>Bleach</li> <li>The World God Only Knows</li> <li>One Piece</li> <li>Kimi No Iru Machi</li> <li>Air Gear</li> <li>Mahou Sensei Negima!</li> <li>Eden no Ori</li> </ul> <!-- #topManga.subSection --></div> <!-- #content --></div> <div id="sideBar"> <div id="thisSeason" class="subSection"> <h2>This Season</h2> <ul> <li>Ao no Exorcist</li> <li>Beelzebub</li> <li>Blade</li> <li>Bleach</li> <li>Blood-C</li> <li>Cardfight! Vanguard</li> <li>Dantalian no Shoka</li> <li>Fairy Tail</li> <li>Gintama (2011)</li> <li>Gyakkyoi Vurai Kaijii: Hakairoku Hen</li> <li>Hana-Saku Iroha</li> <li>Ikoku Meiro no Croisee</li> <li>Itsuka Tenma no Kuro Usagi</li> <li>Kamisama Dolls</li> <li>Kamisama no Memo-chou</li> <li>Mawaru Penguin Drum</li> <li>Mayo Chiki!</li> <li>Morita-san wa Mukuchi</li> <li>Naruto Shippuuden</li> <li>Natsume Yuujinchou San</li> <li>Nekogami Yaoyorozu</li> <li>Nichijou</li> <li>No. 6</li> <li>Nurarihyon no Mago: Sennen Makyou</li> <li>Dantalian no Shoka</li> <li>Fairy Tail</li> <li>Gintama (2011)</li> <li>Gyakkyoi Vurai Kaijii: Hakairoku Hen</li> <li>Hana-Saku Iroha</li> <li>Ikoku Meiro no Croisee</li> <li>Itsuka Tenma no Kuro Usagi</li> <li>Kamisama Dolls</li> <li>Kamisama no Memo-chou</li> <li>Mawaru Penguin Drum</li> <li>Mayo Chiki!</li> <li>Morita-san wa Mukuchi</li> </ul> <!-- #thisSeason.subSection --></div> <!-- #sideBar --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): Which is really about all you should NEED for markup. If I have time later (no promises) I'll toss together the CSS I'd be using with that, and maybe the how/what/why of the choices made for both the above markup, and it's styling. Though for all the 'talk' your real issue is not clearing your floats...