CODEWITHSUNDEEP
htmlcss
Suzi Larsen
Suzi Larsen

Reputation: 1490

How do I make a fixed position child div wrap inside a parent div with a fixed width

I am trying to wrap a fixed position child element within a parent div without it breaking out of the div.

I would like it to behave like the div that is not fixed but I need the child element to be fixed and automatically wrap or resize because I am going to be needing it for a responsive site. So this is why I don't really want to do an overflow situation if possible as I will be having right aligned content in the fixed div

HTML

<div class="parent">
   <div class="child">I am a child div with a 100% width</div>
</div>


<div class="parent">
   <div class="child-unfixed">I am a child div that is unfixed (this is the desired affect I am   after but using a fixed position if possible)</div>
</div>

CSS

.parent {
   background:green;
   padding:20px;
   margin-bottom:20px;
   margin-right:100px;
   width:200px
}

.child {
   background:yellow;
   position:fixed;
   width:100%;
   text-align:right;
}
.child-unfixed {
   background:pink;
}

Here is the JSfiddle

Upvotes: 1

Views: 4109

Answers (5)

Sajjad Hadafi
Sajjad Hadafi

Reputation: 367

You can add transform: translate3d(0px, 0px, 0px) to the parent of that element and it will works fine.

Upvotes: 0

Troy Riemer
Troy Riemer

Reputation: 85

I came across this and thought I would add a solution that worked for me for anyone that may find this. Instead of making the child position: fixed, I made the parent position: fixed, then made the child position: absolute.

Here's the code that I used: https://codepen.io/redclaycreative/pen/MLeEee

HTML

<body>
  <div class="parent shadow">
    <h1 class="child">東京からこんにちは</h1>
  <div>
</body>

CSS

.parent {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 500px;
  max-width: 90%;
  height: 300px;
  background-color: #C6312D;
  -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.child {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  max-width: 90%;
  text-align: center;
  color: #fff;
  -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Upvotes: 2

Suzi Larsen
Suzi Larsen

Reputation: 1490

At first I didn't think there would be a way of doing this because it acts like an absolute div and takes the element of the page.

But it seems that inherit on the width does the trick.

width: inherit;

http://jsfiddle.net/susannalarsen/tLbggwp8/12/

Upvotes: 1

Phlume
Phlume

Reputation: 3131

http://jsfiddle.net/tLbggwp8/11/

Try removing the position:fixed; as indicated in another answer, and then setting the max-width setting to the difference of the parent div and padding.

Manually I have set this to 460px (20px padding on each side).

A few other things you can work with to help with the layout:

  • Use of the calc [max-width:calc(x-y);] function to calculate the max-width for more dynamic use
  • box-sizing:border-box; to assist with the true size of the area with padding and margin contained within the final calculation of size

Upvotes: 0

Der Vampyr
Der Vampyr

Reputation: 951

position: fixed; cannot be inside a div. It sticks to the window and can´t stick to html elements.

See developer.mozilla.org

fixed

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page.

Upvotes: 1

Related Questions