Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by brandonlind2
brandonlind2
7,823 Points

Why isnt making the section height to 45% not working and how can I achieve this goal?

I'm making a fake news article as a project for another code site and I floated the news sections to and I noticed that they bottom borders on the left and the right werent aligned, I tried to fix this but creating placing the h1 and the p elements in sections and making the sections height 45% but it didnt work? Why isnt it working so I understand what happened and how can I make those borders aligned? I have the html here https://jsfiddle.net/eu1gddf6/1/

html{
    margin: auto;
    font-size: 1em;
    padding: 0;
    max-width: 100%;
    text-align: center;
}

 img{
     display: block;
 }
 img, body, ul{
    max-width: 100%;
    margin: auto;
    padding: 0;
 }
.caption-clr{
    background-color: rgba(0,0,0,.1);
}

*{box-sizing: border-box;}


.main-wrapper{
    padding: 2.5% 10%;
    max-width: 100%;
    margin:  0 10%;
}
body,.main-wrapper{
    background-color: lightgreen;
}

header {
    color: white;
    text-shadow: 1px 0px 5px rgb(0,0,1);
    max-width: 100%;
    margin: auto;
    background-image: url(../img/cannabis.jpg);
    padding: 10%;
    background-size: cover;
    background-position: top;
}
p{
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding: 0 0 5px 0;
}
.opening-list li{
    font-weight: bold;
    list-style: none;
}

.opening-list li,.opening-list h3{
    color: white;
}

/**responsive**/

@media screen and (min-width: 550px){
    section {
        height: 45%;
    }
    body{
        background-color: lightgrey;
    }
    .first-right-section{
        float: right;
        margin: 2.5%;
        width: 45%;
    }
    .first-left-section{
        width: 45%;
        margin: 2.5%;
        float: left;
    }
    .clear{
        clear: both;
    }
}

1 Answer

Austin Whipple
Austin Whipple
29,847 Points
Austin Whipple
Austin Whipple
29,847 Points

Default height for CSS elements is to expand to the height of the content within it. When you set a height on an element with a percentage, that percentage is based on the height of the containing element. Unless you declare a height for the parent/containing element, it defaults to only being tall enough to contain the element you're setting to 45%. If that sounds like circular behavior, it's because it definitely is. Unless you have a parent with a height declared, setting a child to 45% of height won't do anything.

You can set the parent element to a particular pixel height, or declare 100% all the way up the tree (to body and html) to take up all the window space. This StackOverflow article is also a good read.