Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

How do you deal with overflow in a given div when reducing the screen?

Hello All,

I'm working on a new project and I'm having trouble with the content in the header portion breaking out of the div when I reduce the screen size. I've tinkered around with trying the overflow: auto property in the header, but that didn't fix the problem. Does anyone know the best easy fix for this?

Here's what I have for my html:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Flowers by Jackie</title>
    <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Courgette|Architects+Daughter' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1" />

</head>

<body>
    <div class="main_header">
        <header>
            <h1>Elegant Floral Design for Any Occassion</h1>    
            <a href="index.html" id="logo"><h2>Flowers by Jackie</h2></a>
                <p>We are locally owned florist shop located in Beautiful Lakeport California.</p>
                <p>We provide floral arrangments for weddings, parties, funerals, and anything else you need.</p>
                <nav>
                    <ul>
                        <li><a href="About.html" class="selected">About</a></li>
                        <li><a href="Contact.html">Contact</a></li>
                    </ul>
                </nav>
        </header>
    </div>
    <div id="wrapper">
        <div class="primary-content">
        <div id="row1">
            <ul class="gallery">
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
            </ul>            
        </div>
        <div id="row2">
            <ul class="gallery">
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>

            </ul>            
        </div>
    </div> <!-- end primary content -->
    <div class="footer">
        <p>Flowers by Jackie a Lakeport Florist // (707) 676-4500 // 1445 Main St. Lakeport, California 99999</p>
    </div>
    </div> <!-- end of wrapper -->

</body>
</html>

and here's what I have for my main.css

/** General Styles **/

* {
    box-sizing: border-box;
    text-decoration: none;
}

h1 {
    color: #FF6699;
    font-size: 2em;
    text-align: center;
    font-family: font-family: 'Architects Daughter', cursive;
    font-weight: normal;
    padding: 10px 0 0 0;
    margin: 0;
}

a {
    color: #FF6699;
}


h2 {
    font-family: 'Courgette', cursive;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
    text-align: center;
}


/** site body **/

body {
    background-color: #F0F0F0;
    color: #FF6699;
    font-family: font-family: font-family: 'Architects Daughter', cursive;

} 


/** Home Page**/


.main_header {
    background-color: #CCCCCC;
    text-align: center;
    height: 200px;
    width: 100%;
    float: left;
    margin: 0 0 30px 0;
    padding: 5px 0 30px 0;

}
/** not sure if this is right

.main-header:after {
    content: "";
    display: table;
    clear: both;
}

**/

#wrapper {
   max-width: 960px;
   margin: 0 auto;
   padding: 0 5%;
}

#logo {
    text-align: center;
    margin: 0;
}


/** navigation **/

nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}

nav ul {
    list-style: none;
    margin: 0 10px;
    padding: 0;
}

nav li {
        display: inline-block;
}

nav a {
    font-weight: 800;
    padding: 15px 10px;
}

nav a, nav a:visited {
    color: #FF6699;
}

nav a.selected, nav a:hover {
    color: #32673f;
}

/** Page Portfolio **/

.primary-content {
    clear: both;
    background: none;
    overflow: auto;
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    margin: auto;
    max-width: 960px;
}

img {
    max-width: 100%;
}

/** floats **/

#row1, #row2 {
    margin: 0;
    padding: 0;
    width: 46.5%;

}

#row1 {
    float: left;
    margin-left: 25px;
}

#row2 {
    float: right;
    margin-right: 25px; 
}


.gallery {
  margin: 0;
  padding: 0;
  list-style: none;

}

.gallery li {
  background-color: #f5f5f5;
  color: #bdc3c7;
  margin: 10px;
}

.primary-content:after {
    content: "";
    display: table;
    clear: both;

}



/** Footer **/

.footer {
    0.75em;
    text-align: center;
    padding: 50px 0 0 0;

}

Thanks in advance.

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,089 Points

is overflow: hidden; what you might be looking for?

I noticed the following

/** not sure if this is right

.main-header:after {
    content: "";
    display: table;
    clear: both;
}

Which looks like the rules for a clearfix solution. Try putting hidden overflow in there and change it to .main_header.

Good catch on the hyphen vs underscore. I fixed that, but that didn't appear to fix the issue.