Resolved Help with layout issue on static HTML5 CSS3 site for friend's business

Discussion in 'Web Design and Development' started by GorillaPaws, Mar 31, 2012.

  1. GorillaPaws, Mar 31, 2012
    Last edited: Mar 31, 2012

    GorillaPaws macrumors 6502a

    GorillaPaws

    Joined:
    Oct 26, 2003
    Location:
    Richmond, VA
    #1
    I'm coding up my first real site using HTML5 and CSS3. It's a static, fixed-width site, and I'm just getting my feet wet with a project to help out my girlfriend's parents. I'm doing it for free and using this as a learning experience.

    I'm nowhere near finished but I'm running into an issue with how the browser is interpreting my <sections> and <divs>. I've gone through the HTML and I'm pretty confident that all sections and divs are properly closed off, but when I inspect the site via Safari's web inspector, it's ending my <section class="mainContent> without including all of it's content. I'm suspicious that the CSS for the ".mainContent h1" where I "clear:both;" may be part of the problem. I've validated my site, and the only complaints are for how the gradients are being generated (which work for me, are from a book, and I'm pretty sure are unrelated to the issue I'm having). I certainly don't expect anyone to fix my code for me, but if someone could point me in the right direction to an article or otherwise, I'd be very grateful (as would my girlfriend's family).

    Here's the HTML5:
    Code:
    
    <!DOCTYPE html>
    <html>
    	<head>
    	<style type="text/css">
    
    	</style>
    		<link rel="stylesheet" href="style.css" type="text/css" />
    		<title>Under Sink Water Filter Systems</title>
    	</head>
    	<body>
    		<div id="wrapper">
    			<header>
    				<nav>
    					<ul>
    						<li>Home</li>
    						<li>Product</li>
    						<li>F.A.Q.</li>
    						<li><img src="logo.jpg" alt="Aqua Systems Logo" />
    						<li>Company</li>
    						<li>Links</li>
    						<li>Contact</li>
    					</ul>
    				</nav>
    				<section id="productPitch">
    					<img src="productImage.jpeg" alt="Under sink reverse osmosis filter system">
    					<section id="productInfo">
    						<h1>Under Sink Water Filter System</h1>
    						<h2>Reverse Osmosis</h2>
    					</section>
    				</section>
    			</header>
    			<section class="mainContent">
    				<h1>Is bottled water REALLY that bad?</h1>
    				<div class="leftColumn">
    					<article class="Argument">
    						<h2>Environment</h2>
    						<p>An estimated <b>XXXX gallons of petroleum</b> are used to produce, distribute and dispose of plastic water bottles annually.  The majority of bottles end up in landfills <b>producing XXXX tons of waste</b> every year.  Bottled water companies engage in a practice called <b>Water Mining</b> that depletes areas of clean water sources.</p>
    					</article>
    					<article class="Argument">
    						<h2>Health</h2>
    						<p>An estimated <b>XXXX gallons of petroleum</b> are used to produce, distribute and dispose of plastic water bottles annually.  The majority of bottles end up in landfills <b>producing XXXX tons of waste</b> every year.  Bottled water companies engage in a practice called <b>Water Mining</b> that depletes areas of clean water sources.</p>
    					</article>
    				</div>
    				<div class="rightColumn">
    					<article class="Argument">
    						<h2>Cost</h2>
    						<p>An estimated <b>XXXX gallons of petroleum</b> are used to produce, distribute and dispose of plastic water bottles annually.  The majority of bottles end up in landfills <b>producing XXXX tons of waste</b> every year.  Bottled water companies engage in a practice called <b>Water Mining</b> that depletes areas of clean water sources.</p>
    					</article>
    					<article class="Argument">
    						<h2>Quality</h2>
    						<p>An estimated <b>XXXX gallons of petroleum</b> are used to produce, distribute and dispose of plastic water bottles annually.  The majority of bottles end up in landfills <b>producing XXXX tons of waste</b> every year.  Bottled water companies engage in a practice called <b>Water Mining</b> that depletes areas of clean water sources.</p>
    					</article>
    				</div>
    				
    				<h1>Why is an under sink water filter system the SMART choice?</h1>
    
    [COLOR="Red"]				<!-- Browser is ending the mainContent section here, not sure why -->
    [/COLOR]				
    				<div class="leftColumn">
    					<article class="Argument">
    						<h2>Safe</h2>
    						<p>An estimated <b>XXXX gallons of petroleum</b> are used to produce, distribute and dispose of plastic water bottles annually.  The majority of bottles end up in landfills <b>producing XXXX tons of waste</b> every year.  Bottled water companies engage in a practice called <b>Water Mining</b> that depletes areas of clean water sources.</p>
    					</article>
    					<article class="Argument">
    						<h2>Great Tasting</h2>
    						<p>An estimated <b>XXXX gallons of petroleum</b> are used to produce, distribute and dispose of plastic water bottles annually.  The majority of bottles end up in landfills <b>producing XXXX tons of waste</b> every year.  Bottled water companies engage in a practice called <b>Water Mining</b> that depletes areas of clean water sources.</p>
    					</article>
    				</div>
    				<div class="rightColumn">
    					<article class="Argument">
    						<h2>Cost Effective</h2>
    						<p>An estimated <b>XXXX gallons of petroleum</b> are used to produce, distribute and dispose of plastic water bottles annually.  The majority of bottles end up in landfills <b>producing XXXX tons of waste</b> every year.  Bottled water companies engage in a practice called <b>Water Mining</b> that depletes areas of clean water sources.</p>
    					</article>
    					<article class="Argument">					
    						<h2>Convenient</h2>
    						<p>An estimated <b>XXXX gallons of petroleum</b> are used to produce, distribute and dispose of plastic water bottles annually.  The majority of bottles end up in landfills <b>producing XXXX tons of waste</b> every year.  Bottled water companies engage in a practice called <b>Water Mining</b> that depletes areas of clean water sources.</p>
    					</article>
    				</div>
    			</section>
    			<footer>
    				<p>PlaceholderText</p>
    			</footer>
    		</div>
    	</body>
    
    And the CSS3:

    Code:
    body {
    	background-color: #1d1d18;
    }
    #wrapper {
    	width: 960px;
    	margin: 0 auto;
    }
    header {
    	color: black;
    	background-color: #dfdfdf;
    	font-family: "AppleGothic", "Trebuchet MS", sans-serif;
    }
    nav ul {
    	padding: 20px;
    	padding-top: 35px;
    	list-style-type: none;
    }
    nav li {
    	display: inline;
    	padding: 25px;
    }
    
    #productPitch {
    	padding: 30px;
    	/* fallback color */
    	background-color: #dfdfdf;
    	/* firefox 3.6+ */
    	background-image: -moz-linear-gradient(#858585, #dfdfdf);
    	/* Safari 4+, Chrome 1+ */
    	background-image: -webkit-gradient( linear, 0%, 0%, 0%, 100%, from(#858585), to(#dfdfdf));
    	/* Safari 5.1+ */
    	background-image: -webkit-linear-gradient(#858585, #dfdfdf);
    	height: 400px;
    }
    #productInfo {
    	float: right;
    	text-align: center;
    }
    
    .mainContent {
    	background-color: #081a3a;
    	font-family: Helvetica, sans-serif;
    	color: #edefd0;
    }
    .mainContent h1 {
    	text-align: center;
    	clear: both;
    }
    .rightColumn, .leftColumn {
    	text-align: left;
    	line-height: 25px;
    	float: left;
    	width: 400px;
    	margin: 20px;
    }
    
    footer {
    	color: white;
    }
    
     
  2. Sendaii macrumors member

    Joined:
    Jun 10, 2011
    #2
    What do you mean, it's ending your mainContent div without including it? What content isn't included? All the information below "Why is an under sink water filter system the SMART choice?"
     
  3. jared_kipe macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #3
    I haven't 'run' the html/css but I think I can intuit what you are experiencing.

    When you have a block level container element that surrounds elements, the height is calculated based on elements that are 'in flow' or something.

    Basically your .leftColumn and .rightColumns have an implicit height but are not contributing to the calculated height of the container until something clears the float. Positioning Absolute/fixed and floating removes them from 'the flow'.

    You need to insert another tag that will clear the floats after the other columns.

    There are other ways to get around that, but this is the most common/useful means to 'fix' this problem.
     
  4. GorillaPaws thread starter macrumors 6502a

    GorillaPaws

    Joined:
    Oct 26, 2003
    Location:
    Richmond, VA
    #4
    Thanks so much for your excellent explanation. I followed your advice and it worked perfectly.
     
  5. jared_kipe macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #5
    Another Piece of advice. You should have one <h1> per page, a couple <h2>'s to support the <h1> and so on down the <h>hierarchy.

    HTML5 introduces some other reasons to use multiple <h1>'s but since your multiple <h1>'s are not used in that way I think they need to go.
     
  6. GorillaPaws thread starter macrumors 6502a

    GorillaPaws

    Joined:
    Oct 26, 2003
    Location:
    Richmond, VA
    #6
    Again, I really appreciate you taking the time to share your wisdom. I'm going to re-implement the "Is bottled water REALLY that bad?" and the other main heading of the mainContent section as h2's and the article headings as h3's.
     

Share This Page