This is what's happening in my HTML & CSS version http://imageshack.us...lcssdesign.png/
And this is what I'd like to happen (FW version) http://imageshack.us...6/fwdesign.png/
I'm not sure what I've done wrong I've gone over the code and I noticed I've used a class clear (clear:both in css) and a .clearfix but the button wouldn't drop unless I used the first method...
Anyway, I'd really appreciate it if you could point me in the right direction and tell me what's wrong so I can see if I can fix the problem.
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>Millionhairs</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="wrapper"> <header id="header_container"> <div id="header_container2"> <div id="mh_logo"> <a href="index.html"><img src="images/logo.png"></a> </div> <nav id="nav"> <ul class="clearfix"> <li class="clearfix"><a href="index.html">Home</a></li> <li class="clearfix"><a href="about.html">About</a></li> <li class="clearfix"><a href="services.html">Services</a></li> <li class="clearfix"><a href="gallery.html">Gallery</a></li> <li class="clearfix"><a href="testimonial.html">Testimonials</a></li> <li class="clearfix"><a href="contact.html">Contact</a></li> </ul> </nav> </div> </header> <section> <article id="billboard_container"> <div id="billboard_container_image" class="clearfix"> <img src="images/home_image.jpg" alt="Grooming Room"> </div> <div id="billboard_cta_container" class="clearfix"> <div id="container_line1"><p>Top quality</p></div> <div id="container_line2"><p>Dog grooming</p></div> <div id="container_line3"><p>From as little</p></div> <div id="container_line4"><p>As</p></div> <div id="container_line5"><p>£15</p></div> <div class="clear"></div> <div id="container_line6"> <a href="services.html"><img src="images/btn_services.png"></a> </div> </div> </article> <article id="boxes"> <p>sss</p> </article> </section> </body> </html>
/* RESET */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; } /* GLOBAL STYLES */ body { } .clear { clear: both; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } header#header_container { background: url(../images/bg_header.jpg) repeat-x top; height: 100px; } #header_container2 { width: 960px; margin: 0 auto; } #mh_logo { position: absolute; } #nav ul { list-style-type: none; margin: 0; padding: 0; float: right; } #nav ul li { float: left; } #nav ul li a { display: block; padding: 0 15px; color: #fff; font-size: 14px; text-decoration: none; text-transform: uppercase; line-height: 100px; font-family: arial, helvetica, sans-serif; } #nav ul li a:hover { background: #000; color: #fff; zoom: 1; filter: alpha(opacity=50); opacity: 0.5; } #billboard_container { margin: 0 auto; padding-top: 10px; width: 960px; } #billboard_container_image { width: 610px; margin-top: 10px; float: left; } #billboard_cta_container { width: 340px; margin-top: 5px; float: right; } #container_line1 { text-transform: uppercase; font-family: arial, helvetica, sans-serif; font-size: 25px; margin-bottom: 7px; color: #666; } #container_line2 { text-transform: uppercase; font-family: arial, helvetica, sans-serif; font-size: 30px; margin-bottom: 7px; color: #404040; } #container_line3 { text-transform: uppercase; font-family: arial, helvetica, sans-serif; font-size: 20px; margin-bottom: 7px; color: #666; } #container_line4 { text-transform: uppercase; font-family: arial, helvetica, sans-serif; font-size: 10px; float: left; margin-right: 10px; color: #666; } #container_line5 { text-transform: uppercase; font-family: arial, helvetica, sans-serif; font-size: 30px; float: left; margin-bottom: 7px; color: #404040; } article#boxes { }
Thanks!