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 Josh McMullin
Josh McMullin
3,012 Points

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,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 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.

Josh McMullin
Josh McMullin
3,012 Points
Josh McMullin
Josh McMullin
3,012 Points

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