Apologies for the vague title, but describing this issue is a bit tricky. Essentially, I have a wrapper div that is positioned absolutely with right = 100%, causing it to move completely off the screen to the left. Inside the wrapper, there is a div named "answer" that I want to bring back onto the screen by using left = 100%. Although there are other divs within the wrapper labeled "1," "2," and "3" which I reposition to show on the screen through scripting, this isn't the main concern. Below is the HTML code snippet:
<!DOCTYPE html>
<html>
<head>
<title>321 2.0</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="wrapper">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="queue"></div>
<div id="answer">
<input id="field" type="text" name="answer">
<button onclick="answer()">></button>
</div>
<script type="text/javascript" src="script.js"></script>
</div>
</body>
</html>
And here's the CSS code block:
body {
margin: 0;
}
div {
margin: 0;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
#wrapper {
position: absolute;
right: 100%;
padding: 0;
}
#1 {
background-color: #FFCCCC;
}
#2 {
background-color: #DDDDDD;
}
#3 {
background-color: #CCCCFF;
}
#queue {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
padding: 0;
}
#answer {
margin: 0;
padding: 0;
left: 100%;
background-color: #FFCCCC;
}
The outcome results in a blank screen, as expected given that the wrapper is meant to shift everything off to the left (except #queue). However, I anticipate #answer to remain visible on the screen due to its left: 100% property. My assumption is that the issue lies in #answer being relatively positioned rather than absolutely, as the container only moved offscreen once it was set to absolute positioning. I hope this isn't the problem since I require all elements inside the wrapper to maintain relative positioning. Any insights into what might be happening?