0

Is there a way for an element to become full-width inside of a fixed width parent?

So a document with following layout:

 _____________________o- body
|   _______________   |
|  |               o------ first
|  |    limited    |  |
|__|_______________|__|
|                     o----- second
|      full-width     |
|_____________________|
|  |               |  |
|  |_______________o------ first
|_____________________|

where

body > first {
    max-width: 400px;
}

How can body > first > second become full-width?

Streetlamp
  • 1,537
  • 2
  • 15
  • 27
  • you could put `second` outside of `limited` and then change the position to absolute and place it where you want – litelite Aug 21 '15 at 19:49
  • @litelite The problem is that I have no idea how big the content of either element will be before – Streetlamp Aug 21 '15 at 19:52
  • No matter how big the content is, you can set the full width to be 100%, the content will be adjusted by screen. I agree with litelite, you can make the second div to be absolute, and separate it from limited div. – yong wu Aug 21 '15 at 19:56
  • @yongwu Even if the width is 100%, how can I account for changing heights? – Streetlamp Aug 21 '15 at 19:58
  • well, I couldn't get it. if the content has already been in the div, the height of the div will adjust automatically. if you want to change the position of the div, use top:50%;transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); it will adjust vertically middle. Or you can choose other numbers. – yong wu Aug 21 '15 at 20:03

0 Answers0