CODEWITHSUNDEEP
css
user544079
user544079

Reputation: 16629

make div width increase with content

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

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

CSS is as

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

How do we adjust the user1 and footer so that when the content of user1 expands the site-wrapper expands automatically

Upvotes: 4

Views: 7647

Answers (4)

Saifeddin
Saifeddin

Reputation: 46

I've been struggling with this for a while. But this perfectly worked for me. Try :

#user1 { 
    width: fit-content;
}

Upvotes: 0

RajG
RajG

Reputation: 832

change the parameters of height: % to height: px. This will expand as required!

Upvotes: 1

Cyril Gupta
Cyril Gupta

Reputation: 13723

Don't use width in site-wrapper, instead use min-width

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

Upvotes: 1

Drew Noakes
Drew Noakes

Reputation: 310907

The problem is that you're setting the height of the wrapper explicitly to 100%.

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

Upvotes: 4

Related Questions