CODEWITHSUNDEEP
htmlcss
Dave
Dave

Reputation: 3924

Positioning content within a container

I want to make a console overlaid on a background image but cannot get positioning to work. There is a container div with two overlapping child divs, one for a semi-transparent shade and one for text.

What is the proper CSS to fit the children inside the container's content box?

EDIT: the desired result is for the yellow word "content" to be placed inside the content area highlighted in blue in the image, and for the content area to be resized within the browser window with 50px margins (150px on top). If you run the code, you won't see a blue box - that desired content location is illustrated by hovering over the content box (labeled 384 x 384) in Chrome's debugging window.

The desired result is:

  1. the word "content" appears inside the content area of the container (shown in blue in the image),
  2. if provided, more content text appears inside the blue content area with none outside that area,
  3. the content area does not change size regardless of what text is inside it,
  4. the content area does change size when the viewport is resized, so that it is always 100 px horizontally and 200 px vertically smaller than the viewport,
  5. The browser window has a gray background. The area shown in blue in the image should have a transparent reddish background and opaque yellow-green text. There is no blue in the desired output, the blue just illustrates where the red should be located if the CSS were working properly. The desired output is a gray page with a red tinted box and opaque yellow text.

Fiddle at: https://jsfiddle.net/dave2/381rnsy5/

Console1

body {
  background-color: gray;
}

#container {
  position: absolute;
  padding: 50px;
  padding-top: 150px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

#bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: red;
  opacity: 0.25;
  border: 1px solid blue;
  box-sizing: border-box;
}

#text {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 20px;
  overflow-y: hidden;
  color: greenyellow;
  border: 1px dashed;
  box-sizing: border-box;
}
<div id="container">
  <div id="bg">
    background
  </div>
  <div id="text">
    content
  </div>
</div>

Upvotes: 0

Views: 1461

Answers (1)

Shoelaced
Shoelaced

Reputation: 881

Is this what you're going for?

https://jsfiddle.net/qjLbdtmv/2/

HTML

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="container">

        <div id="bg">
            background
        </div>

        <div id="text">
            content
        </div>

    </div>
</body>

</html>

CSS

body {
  background-color: gray;
}

#container {
  width: 100%;
  height: 100vh;
  position: relative;
  box-sizing: border-box;
}

#bg,
#text {
  position: absolute;
  top: 150px;
  right: 50px;
  bottom: 50px;
  left: 50px;
}

#bg {
  background-color: red;
  opacity: 0.25;
  border: 1px solid blue;
  box-sizing: border-box;
}

#text {
  padding: 20px;
  overflow-y: hidden;
  color: greenyellow;
  border: 1px dashed;
  box-sizing: border-box;
}

The child divs can only be positioned based on their parent, but you need a position set on the parent for that to happen.

Upvotes: 1

Related Questions