http://blakeanthony.net/style.html Im trying to recode this website http://thejtsite.com/ Does anyone know why .homeRecent isnt floating right? Like its supposed 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> <style type="text/css"> html, body { height:100%; } body { -x-system-font:none; color:#111; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:100%; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; margin:0; padding:0; backround-color:#111; } #containerWrapper { margin-bottom:-255px; margin-left:auto; margin-right:auto; min-height:100%; padding-left:20px; padding-right:20px; position:relative; width:940px; } #container { background:#017080 url() repeat-x scroll center top; } h1 { background-image:url(http://i38.tinypic.com/2byy3p.jpg); background-position:center top; background-repeat:no-repeat; height:152px; text-indent:-9999px; } #content{ background:transparent url(../images/divider.png) no-repeat scroll right 50px; display:inline; float:left; margin-bottom:30px; margin-top:20px; padding-right:45px; width:445px; } #mainMenu { -x-system-font:none; color:#AEC68E; float:left; font-family:Georgia,"Times New Roman",Times,serif; font-size:16px; font-size-adjust:none; font-stretch:normal; font-style:italic; font-variant:normal; font-weight:bold; line-height:28px; text-transform:lowercase; width:940px; } #mainMenu ul { border:0 none; float:left; height:22px; left:0; list-style-type:none; margin:0; padding:0; top:0; width:347px; } ul, li { list-style-image:url(../images/bullet.png); list-style-type:none; text-align:left; } #mainMenu ul li { display:block; float:left; margin:0; padding:0; text-indent:-9999px; } #mainMenu ul { list-style-type: none; margin: 0px; padding: 0px; } #mainMenu li { float: left; padding-right: 10px; } #content { background:transparent url(http://i38.tinypic.com/jujmt2.png) no-repeat scroll right 50px; display:inline; float:left; margin-bottom:30px; margin-top:20px; padding-right:45px; width:445px; } .homeContent { background:transparent url(../images/roof.png) repeat scroll 0 0; height:47px; margin-top:0; text-indent:-9999px; width:394px; } p { color:#111; font-family:Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; } #homeRecent { float:right; margin-bottom:30px; margin-top:20px; width:435px; } .project { background:transparent url(http://i36.tinypic.com/34xlyy8.png) repeat scroll 0 0; height:23px; margin-top:0; text-indent:-9999px; width:150px; } </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Menu Test </title> <link type="text/css" rel="stylesheet" href="screen.css" media="screen, projection" /> </head><body> <div id="containerWrapper"><div id="container"> <h1> J. Taylor <b>Design</b> <i>web design, graphic design, print design.</li> <span></span> </h1> <ul id="mainMenu"> <li><a href="/welcome">Welcome</a></li> <li><a href="/portfolio">Portfolio</a></li> <li><a href="/blog">Blog</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> <div id="content"> <div id="homeContent"> <h2> You wouldn't try to fix your own roof, so why would you make your own website? </h2> <p> Ok, so roofers are exempt from the above question, but you get the point. When you choose to work with us, it becomes our business to help keep your business modern and looking great. We strive for professional, clean web design that will help to enhance your message. Our name is attached to every site we create, so the feedback that you get directly reflects us. We know that people care about their business, and so do we. If you're the kind of person that really wants your work professionally presented, then you're the business that we want to work with. </p> <p><strong>Leave it to us to take care of your business</strong></p> <a href="/portfolio" class="portfolioLink"> <img src="images/portfolioLink.jpg" alt="Check out our Portfolio" /> </a> <!-- #homeContent --></div> <div id="homeRecent"> <h2> Recent Projects </h2> <div class="project"> <a href="/project/001"> <img src="images/scorecard.png" alt="ScoreCard Sports Bar and Grill" /> </a> <h3><a href="/project/001"> Scorecard Sports Bar and Grill </a></h3> <blockquote> <p> The website looks great and he's always in contact with you to make sure everything is the way you want it. Once he receives requests, his turnaround time is very quick. I would highly recommend him to anyone! </p><p> <cite> Roshaun Kerdzaliev<br /> Owner </cite> </p> </blockquote> <!-- .project --></div> <div class="project"> <a href="/project/002"> <img src="images/wrightVet.png" alt="Wright Veterinary Medical Center" /> </a> <h3><a href="/project/002"> Wright Veterinary Medical Center </a></h3> <blockquote> <p> We are more than pleased with the final product. Our clients have commented that they enjoy the site, and love the virtual tour that was added. </p><p> <cite> Rhonda Kromer<br /> Practice Manager </cite> </p> </blockquote> <!-- .project --></div> <div class="project"> <a href="/project/003"> <img src="images/carpentersChurch.png" alt="The Carpenters Community Church" /> </a> <h3><a href="/project/003"> The Carpenters Community Church </a></h3> <blockquote> <p> Jt is knowledgeable and passionate about the details that will get the job done. Our site fits us and Jt did whatever it took to get us there. </p><p> <cite> Tucker Hibbs<br /> Pastor of Worship and Student Ministries </cite> </p> </blockquote> <!-- .project --></div> <!-- #homeRecent --></div> <!-- #content --></div> <!-- #container, #containerWrapper --></div></div> <div id="footer"> <div id="contactBox"> <a href="/contact"> <img src="images/contactUs.png" alt="Contact Us" /> </a> </div> <div class="footerBox feeds"> <h2>Subscribe</h2> <ul> <li><a href="/rss" title="Subscribe to RSS">RSS</a></li> </ul> </div> <div class="footerBox quickInfo"> <h2>Quick Info</h2> © J. Taylor Design<br /> <em>All Rights Reserved</em><br /> <br /> jt@thejtsite.com<br /> <em>464.560.8394 </div> <div class="footerBox navigation"> <h2>Navigation</h2> <ul> <li><a href="/welcome">Welcome</a></li> <li><a href="/portfolio">Portfolio</a></li> <li><a href="/blog">Blog</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> </div> <!-- #footer --></div> </body></html> HTML:
From a quick look, your content div isn't wide enough to contain both your homerecent and homecontent divs...since I'm guessing you want them side by side. So homerecent should end up below homecontent.
homeContent and homeRecent are both contained in content which only has a width of 445...not wide enough to hold both in line. Plus you have .homeContent in your styles when you made it an id. id's are labelled by '#' and classes by '.' in your styles.
Is this better? <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- #wrapper { margin: auto; width: 800px; } #mainMenu { display: block; clear: both; width: 800px; } #footer { padding: 5px; clear: both; } .clear { clear: both; } #mainMenu ul { margin: 0px; padding: 0px; list-style-type: none; } #mainMenu li { padding-right: 5px; padding-left: 5px; float: left; } #homeContent { float: left; width: 380px; padding-right: 10px; padding-left: 10px; } .project { background:transparent url(http://i36.tinypic.com/34xlyy8.png) repeat scroll 0 0; height:23px; margin-top:0; text-indent:-9999px; width:150px; } #recent { float: right; width: 380px; padding-right: 10px; padding-left: 10px; } --> </style> </head> <body> <div id="wrapper"> <div id="banner"><img src="http://thejtsite.com/images/header.jpg"></div> <div id="mainMenu"> <ul> <li><i><a href="http://blakeanthony.net/welcome">Welcome</a></i></li> <li><i><a href="http://blakeanthony.net/portfolio">Portfolio</a></i></li> <li><i><a href="http://blakeanthony.net/blog">Blog</a></i></li> <li><i><a href="http://blakeanthony.net/about">About</a></i></li> <li><i><a href="http://blakeanthony.net/contact">Contact</a></i></li> </ul> </div> <div class=".clear"></div> <p> </p> <div id="homeContent"> <h2>You wouldn't try to fix your own roof, so why would you make your own website?</h2> <p>Ok, so roofers are exempt from the above question, but you get the point. When you choose to work with us, it becomes our business to help keep your business modern and looking great. We strive for professional, clean web design that will help to enhance your message. Our name is attached to every site we create, so the feedback that you get directly reflects us. We know that people care about their business, and so do we. If you're the kind of person that really wants your work professionally presented, then you're the business that we want to work with.</p> <p><strong>Leave it to us to take care of your business</strong></p> <p><a href="http://blakeanthony.net/portfolio" class="portfolioLink"> <img src="style_files/portfolioLink.htm" alt="Check out our Portfolio" /></a></p> </div> <div id="recent"> <h2>Recent Projects</h2> <div class="project"><a href="http://blakeanthony.net/project/001"> <img src="style_files/scorecard.htm" alt="ScoreCard Sports Bar and Grill" /></a> <h3><a href="http://blakeanthony.net/project/001"> Scorecard Sports Bar and Grill </a></h3> <blockquote> <p>The website looks great and he's always in contact with you to make sure everything is the way you want it. Once he receives requests, his turnaround time is very quick. I would highly recommend him to anyone!</p> <p><cite>Roshaun Kerdzaliev<br /> Owner</cite></p> </blockquote> </div> <div class="project"><a href="http://blakeanthony.net/project/002"> <img src="style_files/wrightVet.htm" alt="Wright Veterinary Medical Center" /></a> <h3><a href="http://blakeanthony.net/project/002">Wright Veterinary Medical Center</a></h3> <blockquote> <p>We are more than pleased with the final product. Our clients have commented that they enjoy the site, and love the virtual tour that was added.</p> <p><cite>Rhonda Kromer<br /> Practice Manager</cite></p> </blockquote> </div> <div class="project"><a href="http://blakeanthony.net/project/003"> <img src="style_files/carpentersChurch.htm" alt="The Carpenters Community Church" /></a> <h3><a href="http://blakeanthony.net/project/003">The Carpenters Community Church</a></h3> <blockquote> <p>Jt is knowledgeable and passionate about the details that will get the job done. Our site fits us and Jt did whatever it took to get us there.</p> <p><cite>Tucker Hibbs<br /> Pastor of Worship and Student Ministries</cite></p> </blockquote> </div> </div> <div id="footer"> <div id="contactBox"><a href="http://blakeanthony.net/contact"><img src="style_files/contactUs.htm" alt="Contact Us"></a></div> <div class="footerBox feeds"> <h2>Subscribe</h2> <ul> <a href="http://blakeanthony.net/rss" title="Subscribe to RSS">RSS</a> </li> </ul> </div> <div class="footerBox quickInfo"> <h2>Quick Info</h2> © J. Taylor Design<br> All Rights Reserved<br /> <br> jt@thejtsite.com<br> 464.560.8394 </div> <div class="footerBox navigation"> <h2>Navigation</h2> <ul> <li><a href="http://blakeanthony.net/welcome">Welcome</a></li> <li><a href="http://blakeanthony.net/portfolio">Portfolio</a></li> <li><a href="http://blakeanthony.net/blog">Blog</a></li> <li><a href="http://blakeanthony.net/about">About</a></li> <li><a href="http://blakeanthony.net/contact">Contact</a></li> </ul> </div> </div> </div> </body> </html> HTML:
Well how did it work? Not a huge fan of the empty paragraph tag for spacing - you're better off using padding or margin there