How to make a div grow with its children when inline-blocks don't fit anymore

Question

so I have this code

        <div class="contentBlock">
            <div id="profileBlock">
                <div id="imageContainer"></div>
                <div id="textBlock">                
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>  
            </div>
        </div>

css

.contentBlock
{
    display: inline-block;
    width: 100%;
    height: 100%;
}

#profileBlock
{
    text-align: center;
    margin: 25px 25px;
    height: 350px;
}

#textBlock
{
    width: 50%;
    display: inline-block;
    margin: 0px 25px;
}

#imageContainer
{
    vertical-align: top;
    display: inline-block;
    width: 250px;
    height: 300px;
    background-image: url('http://placehold.it/250x300');
    background-repeat: no-repeat;
}

https://jsfiddle.net/h21f2882/

It's basically a section of my portfolio website. I'm trying to have the placeholder picture positioned next to my text. However when I resize my browser the text goes underneath the picture, which is not the problem I'm trying to address. The problem is however that the container does not scale. Allowing the entire textBlock div to overflow it's boundaries.

Now I have two questions:

1. If I would make a media query where I would change the display back into block and resize the profileBlock to X pixels. Would this be bad practice as I would be using a magic number to set the height?

2. How could I change the height of this container to fit it's children after this occurrence?

Thanks in forward Max Beekmans

Answer 1

You were almost there. You just need to add two lines of code:

1. html, body { height: 100%; }

   Since you're using a percentage height in .contentBlock, you need to specify a height on parent elements – in this case, body and html. Without this code, the height: 100% in .contentBlock isn't doing anything.

   For an explanation about using percentage heights in CSS see my answer here:
   Working with the CSS height property and percentage values

2. #profileBlock { min-height: 350px; }

   You've set a fixed height on the container for the image and text (#profileBlock { height: 350px; }). This locks the height in place. Instead, make it a minimum height. It will then expand when the content grows.

   And consider setting a min-height on .contentBlock, as well. Then it will expand to accommodate .profileBlock.

   DEMO: https://jsfiddle.net/h21f2882/2/