Question

Ok so i am using the css below but #profile_side keeps falling out of #wrap_p? What am I doing wrong? I tried googling it…

         #wrap_p{


            border-style: solid;
        }
        #profile_side{
            width: 20%;
            float: right;
            padding: 10px;
            border-style:dashed;
            border-color: gray;
        }
        #profile_main{
            width: 70%;

            padding:10px;
            border-style:dashed;
            border-color: gray;
        }

here’s the html:

    <div id="wrap_p">
    <div id="profile_side">
    <img src="/img.png" width="100%"/>
            <big>username</big>
            <p>user information</p>
    </div>
    <div id="profile_main">
            main user stuff
    </div>
    </div>

Answer 1

Solution: Add overflow: hidden; to #wrap_p

Check this demo: http://jsfiddle.net/WsHAT/1/

overflow: hidden is used to tell the browser to hide any content that overflows the size of the element. But for this to work, the element must have a specified height value.

For elements with no height specified or height: auto (as in your case), this basically expands out the element to show all contents.