html - Make Div and its content only responsive in width? -
first of im bit confused best explain problem , want.
i have div , inside div have div, want div move left , right, nothing more, has follow same path image when resizing (see project).
how make div behind white circle same path circle ?
body { margin: 0; width:100%; } body > div { height: 200px; } .header { background-color: transperent; height: 100px; color: white; } .product { margin-top:0px; height: 600px; background-color: blue; color: white; float:left; width:50%; margin:0; padding:0; display: inline-block; } .product2 { height: 600px; margin-top:0px; background-color: red; color: white; width:50%; float:left; margin:0; padding:0; position: relative; display: inline-block; } .product2 img{ position: absolute; right: 0; bottom: 0; } .main{ background-image: url("http://i.imgur.com/y5hhusa.png"); height:650px; } #crew { height:50px; clear:both; background-color: tomato; color: darkgrey; } .stick { position: fixed; top: 0; } .tour { background-color: black; color: darkgrey; } .pricing { background-color: gold; color: black; } .contact { background-color: black; color: white; } .menu { float: right; font-size: 18px; list-style: outside none none; margin-top: -5px; margin-right: 50px; } .menu li { color: blue; display: block; text-decoration: none; } .menu li { display: inline; float: left; padding-right: 23px; } .menu li a:hover{ background-color:none; color:red; } .div_form { height:35%; width:40%; margin-top:36%; margin-left:41%; background-color:blue; } .product2 .div_form{ } .product2 .div_form .form_title{ position:absolute; z-index:1; margin-top:270px; margin-left:1em; font-size:3em } .product2 .div_form .form_circulo{ z-index:1 } .product2 .div_form .div_email .input_first_email{ margin-top: -70%; margin-left:50%; height:3em; border-radius:5px; padding:1em; width:45%; } .product2 .div_form .divbtnsubmit{ background-color:red; margin-left:60%; width:20em; height:3em; border-radius:1em; text-align:center; margin-top:1em; width:45% } .product2 .div_form .divbtnsubmit .btnsumnitform { font-size:2em; color:white; position:absolute; padding:.3em; margin-left:-3.5em }<!doctype html> <html> <head> <meta charset="utf-8"> <link href="styles.css" rel="stylesheet" type="text/css" > <title> layout </title> </head> <body> <div class="main"> <div class="header"> <img src="http://i.imgur.com/48nyard.png"> <ul class="menu"> <li><a href="#">home </a> </li> <li><a href="#">product tour </a> </li> <li><a href="#">pricing </a> </li> <li><a href="#">try </a></li> <li><a href="#">vision</a></li> </ul> </div> <div class="product"> </div> <div class="product2"> <img src="http://i.imgur.com/3uts03w.png"> <div class="div_form"> </div> </div> </div> </div> <div id="crew"> </div> <div class="tour"> </div> <div class="pricing"> </div> <div class="contact"> </body> </html> ps: sorry argumentation, english isnt best, hope can understand. regards, duarte andrade.
the problem you're trying position div_form div vertically giving margin-top of 36%. margin value in % relative width of container, not height. see w3c.
the simplest solution is, because know height of container (product2) 600px, set margin 36% of 600px, or 216px.
body { margin: 0; } .product { height: 600px; background-color: blue; color: white; float: left; width: 50%; margin: 0; padding: 0; display: inline-block; } .product2 { height: 600px; background-color: red; color: white; width: 50%; float: left; margin: 0; padding: 0; position: relative; display: inline-block; } .product2 img { position: absolute; right: 0; bottom: 0; } .div_form { height: 35%; width: 40%; margin-top: 216px; /* changed */ margin-left: 41%; background-color: blue; }<div class="main"> <div class="header"> <div class="product"> </div> <div class="product2"> <img src="http://i.imgur.com/3uts03w.png"> <div class="div_form"> </div> </div> </div> </div>or if need percentage of parent's height, remove margins , give div position:absolute in same way img. can use left:41%; top:36%; need experiment z-indexes bit stacking order right again.
Comments
Post a Comment