2

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Max Beekmans
  • 45
  • 8

1 Answers1

2

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/

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    Give this man a cookie please ^^ owh and if you wouldn't mind I have another question. I'm using allot of id's in my html but I don't see the reason to use classes should I try and beautify this? and I kinda find it hard to name my id's what would you suggest I'd do? In Java and C# there is allot of documentary on how to name it, what capitals and what not but I can't seem to find this is html css – Max Beekmans Oct 19 '15 at 12:04
  • 1
    There ya go you deserved it! [cookie](http://orig14.deviantart.net/7a88/f/2011/286/b/5/digital_cookie_by_capricorn7769-d4crqig.png) – Max Beekmans Oct 19 '15 at 12:08
  • If you plan to use something once on a page you can use an `id` (e.g., `id="main-container"`). If you plan to repeat a code block across multiple elements, use a `class` (e.g., `class="nav-link"`). For more details see [this post](http://stackoverflow.com/a/12889421/3597276). – Michael Benjamin Oct 19 '15 at 12:16
  • In terms of a naming convention for classes and ids, see my answer here: http://stackoverflow.com/a/31911732/3597276 – Michael Benjamin Oct 19 '15 at 12:19