Okay, I admit I was lousy at DIV tags before HTML5. However, 4.01 is leaving us, and I'm making a new site, and wanted to do it right in HTML5/CSS3. Nothing fancy, just wanted...
THIS content
To appear to be inside the book. Horizontally speaking, the middle of the book is to repeat along the Y axis. And the footer should be at the footer.
The Html Code:
The Css Code:
Image of Error:

I am trying to figure out what else to do as "float bottom" I know is wrong.
THIS content
Code:
THIS DOES NOT WORK! Recipe: About this recipe, and the lovely blurbage that makes people want to know more. I see it as rattling garbage`. Serves: No. Prep time: No. Ingredients: 1/2 tsp. whatever 1/2 blurbage etc. Free of: How to Make: 1.
The Html Code:
Code:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title> Allergic Vegetarian: Recipes for all Allergies </title> <link rel="stylesheet" href="http://www.allergicvegetarian.com/css/AVav.css" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk /html5.js"></script> <![endif]--> </head> <body> <header> <hgroup> <h1> Allergic Vegetarian </h1> <h2> Better Healthy Living for Life </h2> </hgroup> </header> <nav> <ul> <li><a href="http://www.allergicvegetarian.com/recipe/vegan/vegan.html"> Vegan </a></li> <li><a href="http://www.allergicvegetarian.com/recipe/vegetarian/vegetarian.html"> Vegetarian </a></li> <li><a href="http://www.allergicvegetarian.com/recipe/dairy/dairyfree.html"> Dairy & Egg Free </a></li> <li><a href="http://www.allergicvegetarian.com/recipe/fish/fishfree.html"> Seafood & Seaweed Free</a></li> <li><a href="http://www.allergicvegetarian.com/recipe/corn/cornfree.html"> Gluten & Corn Free </a></li> <li><a href="http://www.allergicvegetarian.com/recipe/garlic/garlicfree.html"> Garlic & Onion Free</a></li> <li><a href="http://www.allergicvegetarian.com/recipe/nut/nutfree.html"> Nuts & Peanut Free</a></li> <li><a href="http://www.allergicvegetarian.com/recipe/8/8free.html"> "top 8" free </a></li> <li><a href="http://www.allergicvegetarian.com/recipe/9/9free.html"> "top 8" + onion & garlic free</a></li> <li><a href="http://www.allergicvegetarian.com/recipe/kyt/kytf.html"> Kyt Friendly </a></li> <li><a href="http://www.allergicvegetarian.com/recipe/notes/notes.html"> Notes & Warnings </a></li> <li><a href="http://www.allergicvegetarian.com/recipe/notes/aboutus.html"> About Us </a></li> </ul> </nav> <!-- ABOVE SHOULD BE FINE --> <article> <div class="topbk"> <br> <br> THIS DOES NOT WORK! </div> <div class="middlebk"> <br> <br> <section class="leftfirst"> <header> <hgroup> <h2> Recipe: </h2> <h3> </h3> </hgroup> </header> <p> About this recipe, and the lovely blurbage that makes people want to know more. I see it as rattling garbage`. </p> </section> <section class="leftsecond"> <header> <hgroup> <h3> Serves: No. Prep time: No. </h3> <h3> Ingredients: </h3> </hgroup> </header> <p> 1/2 tsp. whatever <br> 1/2 blurbage <br> etc. </p> </section> <section class="rightfirst"> <header> <hgroup> <h2> Free of: </h2> <h3> How to Make: </h3> </hgroup> </header> <p> <!-- 20 of, by default --> <ol> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ol> </p> </section> </div> <div class="bottombk"> <br> <br> <br> <br> </div> </article> <aside> Try my...<br> <a href="http://www.allergicvegetarian.com/build/build.html"> "Build Your Own Recipe TM" </a> </aside> <footer> <p> © 2010 by Kytriya. All rights reserved. </p> </footer> </body> </html>
The Css Code:
Code:
* { font-family: Lucida Sans, Arial, Helvetica, sans-serif; } body { width: 980px; margin: 0px auto; background-color: #337711; } header h1 { font-size: 28px; margin: 0px; color: #cc99ee; text-shadow: 2px 2px 5px #000; } header h2 { font-size: 20px; padding: 4px; margin: 0px; color: #cc99ee; font-style: italic; } header h3 { font-size: 18px; padding: 4px; margin: 0px; color: #cc99ee; font-style: italic; } /* HERE IS PART OF THE PROBLEM: Book Image Coding */ .leftfirst {padding: 10px; float: left; background-color: #cc99ee} .leftsecond {padding: 8px; float: left;} .rightfirst {padding: 10px; float: right;} .topbk { background: url(/css/img/topbk.gif) no-repeat; width="960px" height="40px"; margin:0; padding:0; position: relative;} .middlebk { background: url("/css/img/middlebk.gif") repeat-y; position: relative;} .bottombk { background: url("/css/img/bottombk.gif") no-repeat; position: relative;} /* END OF BOOK IMAGE CODING */ nav ul { list-style: none; padding: 2px; display: table-row-group; clear: right; background-color: #000; padding-left: 4px; height: 24px; } nav ul li { display: inline-table; padding: 2px 20px 5px 10px; border-left: thin solid #bdb76b; border-top: thin solid #bdb76b; border-right: thin solid #bdb76b; border-bottom: thin solid #bdb76b; height: 24px; border-right: 1px solid #bdb76b; } nav ul li a { color: #bdb76b; text-decoration: none; font-size: 16px; font-weight: bold; } nav ul li a:hover { color: #fff; } article > header time { font-size: 14px; display: block; width: 26px; padding: 2px; text-align: center; background-color: #999955; color: #fff; font-weight: bold; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; float: left; margin-bottom: 10px; } article > header time span { font-size: 10px; font-weight: normal; text-transform: uppercase; } article > header h3 { font-size: 20px; float: left; margin-left: 14px; } article > header h3 a { color: #993333; } article > section header h3 { font-size: 16px; } article p { clear: both; background-color: #e3e293; padding: 6px; } /* kingsthingsitalic may need TT changed to whatever it really is. */ aside{margin-top: 10px; float: right; display: inline; width: 430px; /* 430px */margin-right: -850px;position: relative;} aside h2{padding: 5px 30px; margin-top: -8px;} aside h3{font-family: 'kingsthingsitalic TT', arial, serif; margin-top: 10px; margin-left: 30px; margin-right: 125px; margin-bottom: 0px; font-size: 16px; line-height: 21px; font-weight: bold; text-decoration:underline; -webkit-transition: color .1s ease-out; -moz-transition: color .3s ease-out; -o-transition: color .3s ease-out; transition: color .3s ease-out;} aside p{ margin: 20px 30px; } /* OBVIOUSLY WRONG */ footer p { float: bottom; text-align: center; font-size: 12px; color: #888; margin-top: 24px; } /* e7e6ac! e3e293 =2 */

I am trying to figure out what else to do as "float bottom" I know is wrong.
Comment