How can I ensure that Div and its contents are only responsive to changes in width?

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 &nbsp;&nbsp;&nbsp;</a> </li>
    <li><a href="#">Product Tour&nbsp;&nbsp;&nbsp;</a> </li>
    <li><a href="#">Pricing&nbsp;&nbsp;&nbsp;</a> </li>
    <li><a href="#">Try&nbsp;&nbsp;&nbsp;&nbsp;</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.

htmlcss

Answer №1

The issue at hand is attempting to vertically position the div_form div by applying a margin-top of 36%. However, it's important to note that when using a percentage value for margin, it is relative to the width of the container, not its height. For more information, refer to the W3C source.

A straightforward solution is to calculate the exact margin based on the known height of the container (product2) which is 600px. Therefore, setting the margin to 36% of 600px equals 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; /* Adjusted margin value */
  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>

Alternatively, if the goal is to use a percentage of the parent element's height, the margins can be removed and the div given a position:absolute similar to the img. This approach allows for specifying the positioning with properties like left:41%; top:36%, although adjustments to z-indexes may be necessary to ensure proper stacking order.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to update the value of an element using JavaScript?

My goal is to manipulate the content of a specific element on a third-party web page using a JavaScript Add-on in order to display a clickable hyperlink. I have already identified the link that I want to interact with on the page, and I believe document.g ...

javascripthtml

Is it possible to modify the background color of a checkbox?

I am looking to modify the background color of the checkbox itself, specifically the white square. I have spent a lot of time researching this topic but most articles suggest creating a div and changing its background color, which does not affect the whi ...

jqueryhtmljquery-uicssjquery-plugins

Is it possible to alter the css twice through the action of clicking on two individual buttons

One feature I have in my interface allows users to click on the edit button to bring up borders and change the background color of other divs. Once the edit button is pressed, it is replaced by cancel and save buttons. The goal is for the borders and backg ...

javascriptjqueryhtmlcss

When using Vue.js, the class binding feature may not function properly if it is referencing another data property that has variants

I am currently developing a basic TODO application. Within my index.html file, I have a main div with the id #app. Inside this div, there is another div with the class .todobox where I intend to display different tasks stored in my main.js file. Each task ...

javascriptcssvue.jsvuejs2vue-component

Troubleshooting problem with Materialize CSS in UI router

Incorporating Materialize CSS along with Angular's ui.router for state management and HTML rendering has led to a challenge. Specifically, the Materialize Select component is not initialized upon state changes since Materialize components are typicall ...

javascriptangularjshtmlangular-ui-routermaterialize

jquery hover effect not functioning properly

I have a question regarding my jquery mobile application. I am trying to implement a hover effect on items with the class grid-item, where the width and height change simultaneously in an animation. Here is the code snippet I am using: $('.grid-i ...

javascriptjqueryhtmlcsshover

Reducing Image Size for Logo Placement in Menu Bar

Hello all, I am a newcomer to the world of web coding. Please bear with me if I ask something that may seem silly or trivial. I recently created a menu bar at the top of my webpage. Below that, there is a Div element containing an image. My goal is to make ...

jqueryhtmlcss

`.svg file appearing slightly fuzzy when magnified in Chrome``

After careful consideration, I've chosen to use an SVG for my website logo. However, I am facing an issue with it rendering properly in Google Chrome. When the zoom level is set at 100%, the image appears blurry, but if I zoom out a couple of times, i ...

htmlcssxmlgoogle-chromesvg

Struggling to retrieve Codemirror textarea values across multiple elements with JavaScript/jQuery

I've been struggling to retrieve the values from my textarea codemirror in order to send them as JSON to the server for saving after editing. Unfortunately, I am unable to select the ELEMENT...I even attempted to grab the element by its id...with no s ...

javascriptjqueryhtmlcodemirror

Is there a more efficient way to optimize my coding for this Cellular Automata project?

As a beginner in programming, I wanted to delve into the world of cellular automata and decided to create my own using JavaScript. The project involves a simple binary (black and white) 2D CA where each cell updates its color based on the colors of its 8 ...

javascripthtmlcellular-automata

Tips for calculating the total of each row and column in a table with jQuery

<table id="repair-invoice"> <tr> <th>Item</th> <th>Parts</th> <th>Labor</th> <th>Total</th> </tr> <tr> <td>Oil Change</td&g ...

javascriptjqueryhtmlsumhtml-table

How can I incorporate a fade opacity effect into my Div scrolling feature?

I successfully implemented code to make div elements stick at the top with a 64px offset when scrolling. Now, I am trying to also make the opacity of these divs fade to 0 as they scroll. I am struggling to figure out how to achieve this effect. Below is ...

javascriptcss

The clash between Angular's ng-if directive and Bootstrap's popover feature causing unexpected

<div class="form-group" ng-if="firstname"> <label>First Name</label> <input readonly type="text" class="form-control" id="first_name" ng-model="firstname" placeholder="First Name"> <a href="" data-toggle="popover" dat ...

htmlangularjstwitter-bootstrap-3popover

Tips for ensuring the footer always stays at the bottom of the page

I'm having an issue with keeping the footer pinned to the bottom of the page. I haven't applied any specific styles to the footer, just placed it at the end of the content. Everything looks great until there's a page with minimal content, ca ...

javascripthtmlcssbootstrap-4footer

I'm having trouble extracting text from the HTML code for an unknown reason

My code seems to be working well until I attempt to use the .text function, resulting in an error message stating "list' object has no attribute 'text". Interestingly, when I apply .text to a single element within the same list, it works without ...

pythonhtmlseleniumweb-scrapingbots

What causes CSS animations to suddenly halt?

Recently, I've been delving into the world of CSS animations and experimenting with some examples. Below is a snippet of code where two event handlers are set up for elements, both manipulating the animation property of the same element. Initially, th ...

javascripthtmlcsscss-animations

browsing through a timeline created using HTML and CSS

I am currently working on a web project that involves creating a timeline with rows of information, similar to a Gantt chart. Here are the key features I need: The ability for users to scroll horizontally through time. Vertical scrolling capability to na ...

javascriptjqueryhtmlcssscroll

Angular 2 component hierarchy with parent and child components

Currently, I am in the process of learning typescript and angular2. My attempt to incorporate parent and child components into my fiddle has not been successful. Despite conducting some research, I have encountered an error that states: Uncaught ReferenceE ...

htmlangulartypescript

PHP contact form not properly sending complete submission data

I'm facing an issue with my HTML contact form that utilizes JavaScript for a change function. Essentially, I have a dropdown menu for different subjects, and based on the selected option, specific fields should appear. However, when a user fills out t ...

phphtmlemailcontacts

Having trouble getting the CSS Hover state to function properly?

I am currently working with a code snippet that looks like this: <div style="position: absolute; margin-left: -22px; margin-top: -22px; left: 502px; top: 379px; z-index: 380; display: block;" class="maptimize_marker_0 f st">1<span class="pinlabel ...

htmlcss