CODEWITHSUNDEEP
htmlcssheight
Theodore Steiner
Theodore Steiner

Reputation: 1605

Content appears outside of 100% height

Can someone explain why, despite having a height set to 100% for both my main content and my main content fixed width, why the child items within the main-content fixed width exist outside of its height? Shouldn't setting height:100% cause it to grow relative to the items placed inside?

*
{
    margin: 0;
    padding: 0;
}

p
{
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    line-height: 19px;
    color: #1e4164;
    margin: 10px 10px;
}

.content-section-heading
{
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 12px;
    line-height: 12px;
    color: #5c5c5c;
    margin: 10px 10px;
    font-weight: 600;
}

h1
{
    font-size: 36px;
    font-family: 'Source Sans Pro', sans-serif;
    line-height: 122px;
    color: #1e4164;
    font-weight: 800;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 70px;
}

header
{
    height: 127px;
    width: 100%;
    background-color: #569ABD;
    box-shadow: rgba(80, 80, 80, 0.7) 1px 1px 2px 0px;
    position: relative;
    z-index: 2;
    
}

#header-fixedWidth
{
    width: 1253px;
    margin: 0 auto;
}

#header-fixedWidth img
{
    margin-top: 3px;
}

#banner
{
    width: 100%;
    height: 772px;
    display: block;
}

#main-content
{
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid black;
    
}

#mainContent-fixedWidth
{
    width: 1253px;
    height: 100%;
    margin: 0 auto;
    border: 1px solid #ccc;
}

.content
{
    height:340px;
    width: 220px;
    background-color: white;
    box-shadow: rgba(192, 192, 192, 0.8) 0px 10px 10px 0px;
    float: left;
    margin: 0px 0px 40px 30px;
}

.content #tempContentImage
{
    height: 180px;
    width: 222px;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>OECTA Template</title>
        <link rel="stylesheet" href="style.css" />
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" />
    </head>
    <body>
        <header>
            <div id="header-fixedWidth">
                <img src="Images/header/navigationMenu.png" alt="mainNavImage" id="mainNav" />
            </div>
        </header>
        <div id="banner">
            <img src="Images/Banner/BenefitsBanner.jpg" alt="bannerImage" id="bannerTemplate" />
        </div>
        <div id="main-content">
            <div id="mainContent-fixedWidth">
                <h1>Intranet</h1>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
                </div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
            </div>
        </div>
    </body>
</html>

Upvotes: 0

Views: 56

Answers (2)

Kaddath
Kaddath

Reputation: 6151

is it what you want? There are different tricky things in here if you are not familiar with CSS:

  • height in % only works well if the hierarchy chain is also defined in %, usually setting 'html' and 'body' to 100% height does the thing, like here, sometimes it's more complex and you will need wrappers or JS
  • floating items kind of get out of the content flow in term of height, correct me if i'm wrong, they "stay in the text line" they are in. To force the container to adapt, tou have to do a "clearfix". It consists in adding a div with a class like i did at the very end of your floating elements list. This clearfix class is maybe outdated, there are many different versions depending on how far you want backwards support.
  • 'height:100%' doesn't adapt to the content, but min-height does. The bad news is that backwards support is not really good. To have a perfect support for this, you might need to use JS (by setting the height depending on the window height when it is smaller, and let adapt to content when bigger)

*
{
    margin: 0;
    padding: 0;
}

html, body
{
    height: 100%;
}

.clear{
    clear: both;
    height: 0; overflow: hidden; /* Precaution pour IE 7 */
}

p
{
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    line-height: 19px;
    color: #1e4164;
    margin: 10px 10px;
}

.content-section-heading
{
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 12px;
    line-height: 12px;
    color: #5c5c5c;
    margin: 10px 10px;
    font-weight: 600;
}

h1
{
    font-size: 36px;
    font-family: 'Source Sans Pro', sans-serif;
    line-height: 122px;
    color: #1e4164;
    font-weight: 800;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 70px;
}

header
{
    height: 127px;
    width: 100%;
    background-color: #569ABD;
    box-shadow: rgba(80, 80, 80, 0.7) 1px 1px 2px 0px;
    position: relative;
    z-index: 2;
    
}

#header-fixedWidth
{
    width: 1253px;
    margin: 0 auto;
}

#header-fixedWidth img
{
    margin-top: 3px;
}

#banner
{
    width: 100%;
    height: 772px;
    display: block;
}

#main-content
{
    display: block;
    width: 100%;
    min-height: 100%;
    border: 1px solid black;
    
}

#mainContent-fixedWidth
{
    width: 1253px;
    min-height: 100%;
    margin: 0 auto;
    border: 1px solid #ccc;
}

.content
{
    height:340px;
    width: 220px;
    background-color: white;
    box-shadow: rgba(192, 192, 192, 0.8) 0px 10px 10px 0px;
    float: left;
    margin: 0px 0px 40px 30px;
}

.content #tempContentImage
{
    height: 180px;
    width: 222px;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>OECTA Template</title>
        <link rel="stylesheet" href="style.css" />
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" />
    </head>
    <body>
        <header>
            <div id="header-fixedWidth">
                <img src="Images/header/navigationMenu.png" alt="mainNavImage" id="mainNav" />
            </div>
        </header>
        <div id="banner">
            <img src="Images/Banner/BenefitsBanner.jpg" alt="bannerImage" id="bannerTemplate" />
        </div>
        <div id="main-content">
            <div id="mainContent-fixedWidth">
                <h1>Intranet</h1>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
                </div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="clear"></div>
            </div>
        </div>
    </body>
</html>

Upvotes: 2

natecornell
natecornell

Reputation: 211

It's because your 'content' items are all floating, so it appears to the browser that there isn't any content in your 'mainContent-fixedWidth' container.

Add the CSS rule overflow: auto to your mainContent-fixedWidth element and that should solve it.

Upvotes: 4

Related Questions