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

Hayden Bradfield
Hayden Bradfield
1,797 Points
Posted by Hayden Bradfield
Hayden Bradfield
1,797 Points

How can I keep images from overflowing its parent container?

I am trying to create a banner with my automated CSS slideshow. The entire content of the page should only be 70% width of the page and centered. So I have gutters on both sides of the page content. The banner is supposed to be positioned under the header.

My images keep on overflowing its parent container.

The HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="autoslide.css">
    </head>
    <body>
        <div id="container">
            <header>
                <h1><a href="autosliding.html"> Hayden Bradfield</a></h1>
                <h2> Web Dev Student </h2>
                <nav>
                    <ul>
                        <li><a href="autosliding.html">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </nav>
            </header>
            <div id="slideshow">
                <img src="frog.jpg" alt="frog on a lillipad">
                <img src="lion.jpg" slt="roaring lion">
            </div>
        </div>
    </body>
</html>

The CSS

body {
    margin:0;
    padding:0;
}

#container {
margin:0;
padding:0;  
width:70%;
margin-left:auto;
margin-right:auto;
}

header {
background-color:yellow;
}

h1 {
    margin:0;
    padding:10px;
}

#slideshow {
margin-left:auto;
margin-right:auto;
position:relative;
height:40%;
}

img {
position:absolute;
opacity:0;
}

img:nth-child(1) {
    animation: xfade 10s 5s infinite;
}

img:nth-child(2) {
    animation: xfade 10s 0s infinite;
}

@keyframes xfade{
   0%{
      opacity: 1;
   }
   50% {
       opacity: 0;
   }

   60% {
       opacity:1;
   }
   100% {
      opacity:1;
   }
}

3 Answers

Joey Frazer
PLUS
Joey Frazer
Courses Plus Student 129 Points
Joey Frazer
Joey Frazer
Courses Plus Student 129 Points

In the parent container, add a width and height then write overflow: hidden.

Hayden Bradfield
Hayden Bradfield
1,797 Points
Hayden Bradfield
Hayden Bradfield
1,797 Points

Now the slideshow doesn't appear at all

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Here are my possible solutions to that problems.

  1. I'll add to my parent element " position: relative" so its child element/s won't be able to get out of it's parent element scope/width

I recommend reading here http://www.w3schools.com/css/css_positioning.asp

  1. I'll add a " display : inline-block " to the image, because image is inline as default.

Hope this help

Cheers!

Hayden Bradfield
Hayden Bradfield
1,797 Points
Hayden Bradfield
Hayden Bradfield
1,797 Points

The parent element, #slideshow, is already set to relative.

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Have you tried my #2 solution?

Hayden Bradfield
Hayden Bradfield
1,797 Points
Hayden Bradfield
Hayden Bradfield
1,797 Points

Neither worked.

The second option did not do anything at all.

Remember, all the content of the web page is within the #container div. The container div sets a width of 70% for everything in the webpage. Within the container div, I have the #slideshow div, which is the parent div containet for the images.

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Have you tried adding max-width for the Images? Maybe your images are too big?

And can you have a snapshot of your project? so we'll able to look at it better. Thanks.

Tamas Antal
PLUS
Tamas Antal
Courses Plus Student 5,536 Points
Tamas Antal
Tamas Antal
Courses Plus Student 5,536 Points

What I usually do is to give a class to the source of the img tag and set the with to 100% so that the image is never gonna overflow its parent, then I can control the parent tag freely and the image is going to adjust to it. I hope that helps.