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 Kristian Woods
Kristian Woods
23,414 Points

How do you use the overflow property in CSS?

Hey, I'm trying to create a row with several divs inside a container div. I want the container div to be 100% of the page, and have the inside divs spill out of that div. However, I want those divs to be hidden. Pretty simple, right?

I want all the divs to be inline with each other, though. I give them a fixed width and height, yet, the divs shrink to fit in the container div. So they don't adhere to my declaration.

I tried decreasing the width of the container div, and make the inner divs larger, yet, they start stacking on top of each other! I want the container div 100% and the inner divs to be a certain width and set their display to inline-block. I then want for any excess div to be hidden from the page on the x-axis, without stacking on each other 

<html>

<head>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
    <div class="main_div">
       <div class="slides">1</div>
       <div class="slides">2</div>
       <div class="slides">3</div>
       <div class="slides">4</div>
       <div class="slides">5</div>
       <div class="slides">6</div>
       <div class="slides">7</div>
       <div class="slides">8</div>
       <div class="slides">9</div>
       <div class="slides">10</div>

    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="contentSlider.js"></script>
</body>

</html>

.main_div {
    width: 100%;
    height: 200px;
    border: 1px solid red;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slides {
    width: 400px;
    height: 200px;
    background-color: orange;
    display: inline-block;
    margin: 0 16px;
    font-size: 80px;
    font-family: sans-serif;
    color: #fff;
    border-radius: 15px;
}

Thanks in advance

1 Answer

Chris Jardine
Chris Jardine
13,299 Points

Hi Kristian

Try using the white-space: nowrap on the .main-div. With overflow:hidden. If you want to scroll those divs, use overflow-y:hidden and overflow-x:auto, this will create horizontal scroll bars.

.main_div {
    width: 100%;
    height: 200px;
    border: 1px solid red;
    overflow-y: hidden;
  overflow-x: auto;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

Hope this helps.

Kristian Woods
Kristian Woods
23,414 Points

Thanks, Chris!

Chris Jardine
Chris Jardine
13,299 Points

You're welcome!