Initially, I'm feeling a bit confused but I'll try my best to articulate my issue and what I need.
Within a div element, there's another div that I want to move left and right only, following the same path as an image when resizing (refer to my project).
How can I ensure that the div behind the white circle always moves in sync with the 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 a {
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: Apologies for any confusion, English isn't my strong suit. Thank you for understanding. Regards, Duarte Andrade.