Menu
I want to expand div parent with child div but I don't know if that's possible and how to do it.
I prepare a fiddle and included some code.
CSS
body { background: gray; } div.page { color: white; background: black; max-width: 72em; margin: auto; padding: 1em; } div.one { background-color: red; width: 40%; } div.two { background-color: green; width: 120%; } HTML
<body> <div class="page"> <div class="one">One</div> <div class="two">Two</div> </div> </body> 
700
You can try adding a fixed height to the parent which might work or put enough content in the child to stretch it; that will work. Show activity on this post. You have margin-bottom set on both elements. With the child having a bottom margin, it will always be smaller by that amount.
Answer: Set the 100% height for parents too If you will try the set the height of a div container to 100% of the browser window using the style rule height: 100%; it doesn't work, because the percentage (%) is a relative unit so the resulting height depends on the height of parent element's height.
You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
The key solution to your problem is to use display:inline-block;
HTML
body { background: gray; } div.page { color: white; background: black; margin: auto; padding: 1em; display:inline-block; } div.one { background-color: red; width: 10em; display:inline-block; } div.two { background-color: green; width: 40em; display:inline-block; }<div class="page"> <div class="one">One</div> <div class="two">Two</div> </div>You cannot use % and expect box to overflow, else it never ends 100% turns 120%, but then 120% of 120%, becomes .. and so on. forget this idea, it cannot work.
Your CSS request is incoherent.
Beside, to see an element to grow wider than window, one of the parent must be able to behave this way, mostly , content overflow and remain visible. (html/body or parent)
as far as i know only:
display: tableinline-tabletable-rowtable-cellCan let container grow as much as content does.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
