1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

I think I hate divs...

Discussion in 'CSS' started by cro91, Oct 19, 2011.

0
  1. #1
    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.
     
    cro91, Oct 19, 2011 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    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.
     
    drhowarddrfine, Oct 19, 2011 IP
  3. cro91

    cro91 Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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.
     
    Last edited: Oct 19, 2011
    cro91, Oct 19, 2011 IP
  4. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #4
    If overflow: hidden; doesn't help, then try the following CSS alternative: 
    float: left; width: 100%;
    Code (markup):
     
    Clive, Oct 19, 2011 IP
  5. cro91

    cro91 Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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):
     
    cro91, Oct 19, 2011 IP
  6. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #6
    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.
     
    drhowarddrfine, Oct 19, 2011 IP
  7. cro91

    cro91 Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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. :p

    +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 :p, 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" )
     
    cro91, Oct 19, 2011 IP
  8. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #8
    Your friend is an idiot. div is a standard HTML container element used everywhere by everybody.
     
    drhowarddrfine, Oct 19, 2011 IP
  9. cro91

    cro91 Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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.
     
    cro91, Oct 19, 2011 IP
  10. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #10
    That still makes him an idiot. At least as far as this is concerned.
     
    drhowarddrfine, Oct 19, 2011 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #11
    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.
     
    deathshadow, Oct 21, 2011 IP
  12. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #12
    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.
     
    Clive, Oct 21, 2011 IP
  13. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #13
    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.
     
    drhowarddrfine, Oct 21, 2011 IP
  14. cro91

    cro91 Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    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 :p
     
    cro91, Oct 21, 2011 IP
  15. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #15
    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.
     
    drhowarddrfine, Oct 21, 2011 IP
  16. cro91

    cro91 Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    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)
     
    cro91, Oct 21, 2011 IP
  17. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #17
    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.
     
    drhowarddrfine, Oct 21, 2011 IP
  18. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #18
    Always use validation, at least you'll know what's the "good code, bad code and ugly code" :p
     
    radiant_luv, Oct 27, 2011 IP
  19. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #19
    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...
     
    deathshadow, Oct 28, 2011 IP
  20. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #20
    Bottom line is: don't hate divs, don't ignore tables.
     
    Clive, Oct 28, 2011 IP