CODEWITHSUNDEEP
htmlcss
RobDeFlop
RobDeFlop

Reputation: 59

CSS: Place a div-Container inside a div-Container

I want to set a div container inside another div-container. The info-Container should be placeable like where i want it (for example: float:right;) and another should be inside it.

But in my case it places the containers among themselves and not inside it.

Here my HTML-Code:

<div class="info">
    s
    <div class="info-header">
    ss
    </div>
</div>

And my CSS-Code:

div.info {
    position: absolute;
    background: yellow;
}
div.info-header {
    position: absolute;
    background: green;
}

Thanks in advance!

Upvotes: 0

Views: 6866

Answers (3)

Suliman Farzat
Suliman Farzat

Reputation: 1260

i hope work so:

body {
  padding: 20px;
  background-color: #20262e;
}

div.info {
    position: absolute;
    background: #ffdd57;
	border-radius: 3px;
    padding: 20px;
	right: 0; /* if left comment hier */
	display: grid;
		
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    grid-gap: 10px;
}

div.info-header {
    position: relativ;
    background: #05ffb0;
	border-radius: 3px;
    padding: 20px;
    font-size: 14px;
}
<div class="info">
    s
    <div class="info-header">
    ss
    </div>
</div>

Upvotes: 0

Abhishek Thapliyal
Abhishek Thapliyal

Reputation: 3

The second div should not have absolute positioning. An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling

If you want to use absolute positioning on second div you have to set first div to position relative.

Check codepen for the example: https://codepen.io/athapliyal/pen/aGYMvP

div.info {
    position: relative;
    background: yellow;
    padding: 20px;
}
div.info-header {
    position: absolute;
    background: green;
}

Upvotes: 0

Srinivas GV
Srinivas GV

Reputation: 167

remove absolute position from the second div css and try

Upvotes: 1

Related Questions