Increase div width with content

Question

I have 2 divs aligned one below the other. They are nested inside another div as

<div id="site-wrapper"> <div id="user1"><div> <div id="footer"></div> </div> 

CSS is

 #site-wrapper{ border: 1px solid; width: 1000px; height: 100%; margin-left: auto; margin-right: auto; } 

How to customize the user and footer so that when the content of user1 is expanded, the wrapper site will automatically expand

Answer 1

The problem is that you set the wrapper height explicitly to 100%.

Remove this property and you will see what you are describing.

Answer 2

Do not use width in site wrapper, use min-width instead

Use overflow: hidden in site-wrapper, it should extend

Answer 3

change the parameters height: % to height: px . It will expand as needed!