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 Isaac Al-Wahaibi
Isaac Al-Wahaibi
6,522 Points

div overlapping

Hello,

container and container-header divs are overlapping ! I haven't used CSS and HTML for more than a year, I couldn't get it done .

I want the container-header div to fit inside the container div, i have tried several ways to get it done with no luck !

Could you please help me ?

HTML code

<div id="container">
        <div class="container-header"><p class="ch"> Page</p></div>
    </div>


CSS code
    #container {
    height: 300px;
    width: 400px;
    margin: auto;
    padding: auto;
    background-color: #00a7b5;
    border-radius: 50px 0px 0px 0px; 
    -moz-border-radius: 50px 0px 0px 0px; 
    -webkit-border-radius: 50px 0px 0px 0px; 
    border: 2px solid #00a7b5;

    }

    .container-header {

    width: 100%;
    height: 30px;
    background-color: #6cc249;


    }

    .ch {
    font-size: 14 px;
    font-weight: bold;
    color: white;

    }```

2 Answers

Gregor Ojstersek
Gregor Ojstersek
17,618 Points

Hey Isaac,

Here is the fiddle I have made: https://jsfiddle.net/sfbkzzg4/ I have only added overflow: hidden to the #container. Is this what you're looking for?

Isaac Al-Wahaibi
Isaac Al-Wahaibi
6,522 Points

Hey Gregor,

thank you for that, exactly what I want,

thank you again,

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

I wonder if what's happening is you've set a fixed height for the container-header div so the background colour is not filling the entire space of a the container div. Try setting the height to 100% or removing that style completely.