June 15, 201214 yr Hi guys, Having an issue with a website I'm making Once the content on the page passes the viewport, the main div doesn't expand with it, really can't work out why. Is anyone able to help with this please? Preview: http://osmithcouk.ipage.com/newer.html <!DOCTYPE html> <html style="margin:0px;background-color:#000;"> <head> <title>Title removed</title> <link href='http://fonts.googleapis.com/css?family=Changa+One' rel='stylesheet' type='text/css'> <style type="text/css"> h1 { font-family: 'Changa One', cursive; font-weight:400; font-size: 30px; color:#fff; display:inline; padding-right:20px; text-shadow: 0px 0px 6px #000; } h2 { font-family: 'Changa One', cursive; font-weight:400; font-size: 30px; color:#fff; display:inline; } html, body{ height:100%; } .selectboxes select { background: #fff; padding: 3px; border: 0px; width:140px; } </style> </head> <body style="margin:0px;font-family:Arial,sans-serif;"> <div style="margin:0 auto;position:relative;width:960px;min-height:100%;background-color:#fff;padding:0px 10px;"> <div style="height:140px;width:940px;background-color:#000;padding:10px;margin-bottom:10px;color:red;"> Image removed </div> <div style="width:940px;background-color:#333;padding:10px 10px 15px 10px;margin-bottom:10px;"> <h1>nav1</h1><h1>nav2</h1><h1>nav3</h1><h1>nav4</h1> </div> <div style="width:960px;margin-bottom:10px;"> <div style="float:left;width:720px;padding:0px;"> <div class="selectboxes" style="width:700px;background-color:#000;padding:10px;margin-bottom:10px;"> <select name="wpmm[]" > <option value="6"> One</option></select> <select name="wpmm[]" > <option value="8"> More</option></select> <select name="wpmm[]" > <option value="7"> Time</option></select> <input style="background:#fff;padding:3px;border:0px;font-weight:bold;" type="submit" value="Search" name="search" class="search" /> </div> <div style="width:100%;height:350px;background-color:#FF00FF;margin-bottom:20px;"> <p>A massive banner saying how cool we are will go here</p> <p>It'll be a carousel of images too!</p> </div> <div style="width:720px;border-bottom:solid 10px #000;text-align:right;"> <h2 style="padding:10px;background-color:#000;color:#fff;">featured something</h2> </div> <div style="width:720px;margin-bottom:10px;border-bottom:solid 10px #000;background-color:#CCC;padding-top:10px;"> <div style="width:140px;height:140px;margin:10px;margin-top:0px;background-color:red;"></div> Something else<br> And more!<br> More texts too!<br> ONE MORE LINE!<br> SUCCESS - failure! </div> <div style="color:red;"> Something else man </div> </div> <div style="float:right;width:230px;padding:0px;"> <div style="background-color:#000;color:#fff;margin-bottom:10px;"> Facebook like button will go here </div> <div style="background-color:#000;color:#fff;margin-bottom:10px;padding:10px;"> Contact us thing will go here<br> <input style="background:yellow;padding:3px;border:0px;font-weight:bold;" type="submit" value="Contact us" name="search" class="search" /> </div> </div> </div> </div> </body> </html> Thanks in advance, Oliver
Create an account or sign in to comment