CODEWITHSUNDEEP
htmlcss
user2252374
user2252374

Reputation: 153

CSS percentage positioning within a wrapper not working as expected

Sorry for the non-specific title, the problem is kind of hard to explain. Basically, I have a wrapper div that's absolutely positioned with right = 100%, which moves it all the way off the screen to the left. Then I have a div called "answer" inside the wrapper which I want to move back on the screen, so I use left = 100%. There are other divs in the wrapper "1" "2" and "3" which I move back on the screen using script, but that's not important. Here's the HTML:

<!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:

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 result is a blank screen, which I would expect since the wrapper is intended to move everything to the left (except #queue), except I expect that #answer stays on the screen due to left: 100%. My guess is the problem is that #answer is position relative rather than absolute, because the wrapper wouldn't move off screen until I made it absolute positioning. But I would hate for that to be the problem, because I need all the elements inside wrapper to have relative positioning. Soooo what gives?

Upvotes: 0

Views: 60

Answers (1)

user3995702
user3995702

Reputation:

left only applies on relative/fixed/absolute positioned elements. #answer has no position specified, so it is static.

This is fixed by position: absolute; on #answer:

#answer {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 100%;
    background-color: #FFCCCC;
}

Upvotes: 2

Related Questions