html - div moving and resizing -
my website address is here 2 black divs on page shrink width , 1 moves , down when page resized. @ moment have created website how on 1920 x 1080 resolution.
my code:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js computing services - home </title> <!--[if ie]> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <link href="iestylesheet.css" rel="stylesheet" /> <![endif]--> <meta name=”description” content=”js computing services offers reliable, affordable , professional computer repair, laptop repair, bespoke web design, web hosting , custom hosted email packages in sheringham, norfolk, uk”> <meta name="keyword" content="sheringham, computer repair, laptop repair, norfolk, web hosting, bespoke web design, sales, new laptops, new desktop, tablets, apple, mac, apple mac, affordable,computer, laptop, refurbished, microsoft partners, ukdwa member, ukdwa, uk web design assosiation, uk web design assosiation member, reliable, custom hosted email, email, cloud storage, android, os x, windows, microsoft,microsoft windows, freindly"> <!--[if !ie]> --> <link href="stylesheet.css" rel="stylesheet" type="text/css" media="only screen" /> <link href="mobilestylesheet.css" rel="stylesheet" type="text/css" media="only screen , (max-device-width: 480px) , screen , (-webkit-min-device-pixel-ratio: 2) , screen , (-webkit-device-pixel-ratio:1.5)" /> <!-- <![endif]--> <!--[if iemobile]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> <link href='http://fonts.googleapis.com/css?family=raleway:400,500,700' rel='stylesheet' type='text/css'> <link rel="apple-touch-icon" sizes="57x57" href="img/faveicon/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="img/faveicon/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="img/faveicon/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="img/faveicon/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="img/faveicon/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="img/faveicon/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="img/faveicon/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="img/faveicon/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="img/faveicon/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="img/faveicon/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="img/faveicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="img/faveicon/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="img/faveicon/favicon-16x16.png"> <link rel="manifest" href="img/faveicon/manifest.json"> <meta name="msapplication-tilecolor" content="#ffffff"> <meta name="msapplication-tileimage" content="img/faveicon/ms-icon-144x144.png"> <meta name="theme-color" content="#ffffff"> <style> html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;} /* html5 display-role reset older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;} ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;} html, body {margin:0;padding:0;height:100%; background-color: #b3b3b3; font-family: 'raleway', sans-serif; min-width: 860px; } .container { width: 100%; margin: auto; position: relative; } #top_bar { background-color: #b3b3b3; width: 100%; height: 49%; top: 0; } #logo { margin-top: 1%; width: 20%; margin-left: auto; margin-right: auto; display: block; margin-bottom: 1%; } #footer { background-color: #0480be; position:fixed; width: 100%; bottom: 0; height: 3%; padding-top: 1%; padding-bottom: 1%; padding-left: 1%; } ul { list-style-position: inside; } { color: inherit; /* blue colors links */ text-decoration: inherit; /* no underline */ } #facebook { float: right; margin-top: -1%; margin-left: -2%; } #google { float: right; margin-top: -1%; } #ukwda { float: right; margin-top: -2%; margin-left: 1%; margin-right: 2%; } #welcome { background-color: #0480be; text-align: center; margin: 1%; } #intro { background-color: #46a546; padding: 1%; margin: 1%; } #services { padding: 1%; margin: 1%; background-color: #ff534b; width: 30%; } #diagnostics { background-color: black; margin: 1%; padding: 2%; width: 18%; border-radius: 40px; height: 30%; } #speedups { background-color: black; margin-top: 1%; margin-left: 25%; margin-top: -9%; padding: 2%; width: 18%; min-width: 18%; border-radius: 40px; overflow: hidden; } </style> <!-- place tag in head or before close body tag. --> <script src="https://apis.google.com/js/platform.js" async defer> {lang: 'en-gb'} </script> </head> <body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getelementsbytagname(s)[0]; if (d.getelementbyid(id)) return; js = d.createelement(s); js.id = id; js.src = "//connect.facebook.net/en_gb/sdk.js#xfbml=1&version=v2.3"; fjs.parentnode.insertbefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="container"> <div id="top_bar"> <div id='cssmenu' class='align-center'> <ul> <li class='active'><a href='index.html'>home</a></li> <li><a href='web_design_and_web_hosting.html'>web design & web hosting</a></li> <li><a href='laptop_and_desktop_computer_repair.html'>laptop & desktop computer repair</a></li> <li><a href='emails.html'>emails</a></li> <li><a href='https://webmail.jscomputingservices.co.uk'>emails login</a></li> <li><a href='contact_us.html'>contact us</a></li> </ul> </div> <a href="http://jscomputingservices.co.uk"><img src="img/new%20logo.png" id="logo"></a> </div> <div id="welcome"> <br /> <font size="+1>"><font color="white"><h1>welcome js computing services</b></h1></font></font> <br /> </div> <div id="intro"> <h1>we located in sheringham, norfolk happily travel surrounding villages when we're needed. offer friendly advice , repairs on 20 years experience. work major operating systems including; microsoft windows, apple os x , ios, android , linux, repair computer , apple macs repair tablets , smartphones , here every aspect of needs. offer both new , refurbished equipment suit budgets such as; new laptops, refurbished laptops, new tablets, phones , custom built desktop pcs. more information or quires/questions please feel free email: assistance@jscomputingservices.co.uk or phone: 07789895603.</h1> </div> <div id="diagnostics"> <h1 align="center"><font size="+1"> diagnostics</font></h1><br /> <h2> @ js computing services <br />we offer free no obligation diagnostics on problems face tech.</h2> </div> <div id="speedups"> <h1 align="center"><font size="+1"> speed ups</font></h1><br /> <h2>computer or laptop running slow? bring can tech preforming should.</h2> </div> </aside> </div> <br /><br /><br /><br /><br /> <footer id="footer"> <font color="white"> <h3>copyright © js computing services ltd website designed & hosted <a href="www.jscomputingservices.co.uk">js computing services</a></h3> <div id="ukwda"> <a href="http://www.ukwda.org/member?mid=113942&key=e50262abb6348a1c572fc864f5a85c08" target="_blank"><img src="http://www.ukwda.org/uploads/images/ukwda_rgb_web.png" width="80"></a> </div> <div id="facebook"> <div class="fb-like" data-href="https://facebook.com/jscs.co.uk" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div></div> <div id="google"> <div class="g-plusone" data-size="medium"></div> </div> </footer> </div> </body>
you're using negative margins instead of floats. change css this:
#diagnostics{ background-color: black; margin: 1%; padding: 2%; width: 18%; border-radius: 40px; float: left; height: 30%; } now take out negative margins , add float: left:
#speedups{ background-color: black; margin-top: 1%; padding: 2%; width: 18%; min-width: 18%; border-radius: 40px; overflow: hidden; float: left; }