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

HTML

Posted by Rahim Spencer
Rahim Spencer
5,772 Points

why use a container class in skeleton

i was running through a tutorial i found online building a responsive site using the skeleton framework.

noticed that all of the sections have the divs wrapped in another div with a container class.

i'm still a little confused as to what the container is used for.

can someone please explain?

here's the code below.

thanks in advance!!

// <!DOCTYPE html> <html lang="en"> <head>

<!-- Basic Page Needs –––––––––––––––––––––––––––––––––––––––––––––––––– --> <meta charset="utf-8"> <title>Amy McAdams | The Traveling Fotog</title> <meta name="description" content="Portfolio for world-renowned travel photographer Amy McAdams."> <meta name="author" content="Justin Seeley">

<!-- Mobile Specific Metas –––––––––––––––––––––––––––––––––––––––––––––––––– --> <meta name="viewport" content="width=device-width, initial-scale=1">

<!-- FONT –––––––––––––––––––––––––––––––––––––––––––––––––– --> <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>

<!-- CSS –––––––––––––––––––––––––––––––––––––––––––––––––– --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/skeleton.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">

<!-- Favicon –––––––––––––––––––––––––––––––––––––––––––––––––– --> <link rel="icon" type="image/png" href="images/favicon.png">

</head> <body>

<header class="main_nav green"> <div class="container"> <div class="twelve columns"> <div class="logo"><a href="#">AMY MCADAMS</a></div> </div> </div> </header>

<div class="container main"> <div class="row"> <div class="four columns portfolio"> <img src="images/backpacker.jpg" /> </div> <div class="four columns portfolio"> <img src="images/desert_cycle.jpg" /> </div> <div class="four columns portfolio"> <img src="images/italy_bikes.jpg" /> </div> </div>

<div class="row">
    <div class="four columns portfolio">
        <img src="images/on_safari.jpg" />
    </div>
    <div class="four columns portfolio">
        <img src="images/overlook_mtn.jpg" />
    </div>
    <div class="four columns portfolio">
        <img src="images/paris_couple.jpg" />
    </div>
</div>

<div class="row">
    <div class="four columns portfolio">
        <img src="images/single_rider.jpg" />
    </div>
    <div class="four columns portfolio">
        <img src="images/sunset_beach.jpg" />
    </div>
    <div class="four columns portfolio">
        <img src="images/toes_sand.jpg" />
    </div>
</div>

</div><!--Container-->

<div class="row green"> <div class="container"> <div class="four columns"> <img class="avatar" src="images/amy.jpg" /> </div> <div class="eight columns"> <h2 class="bio">About Amy McAdams</h2> <p class="bio">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sun</p> </div> </div> </div><!--Row Green-->

<footer> <div class="container"> <div class="row twelve columns"> <ul class="social"> <li class="facebook"><a href="#"><i class="fa fa-facebook-square fa-lg"></i></a></li> <li class="twitter"><a href="#"><i class="fa fa-twitter-square fa-lg"></i></a></li> <li class="instagram"><a href="#"><i class="fa fa-instagram fa-lg"></i></a></li> <li class="flickr"><a href="#"><i class="fa fa-flickr fa-lg"></i></a></li> <li class="youtube"><a href="#"><i class="fa fa-youtube-square fa-lg"></i></a></li> <li class="linkedin"><a href="#"><i class="fa fa-linkedin-square fa-lg"></i></a></li> </ul> </div> <div class="row twelve columns"> <p>© 2015 Amy the Traveling Fotog. All Rights Reserved.</p> </div> </div> </footer>

<!-- End Document –––––––––––––––––––––––––––––––––––––––––––––––––– --> </body> </html>

//

Brian O'Grady
Brian O'Grady
10,094 Points

The Div and div class's are used for visual organization. Some places use div class's to separate out the styles or to have specific styles applied to the inner div class's.

1 Answer

Michalis Efstathiou
Michalis Efstathiou
Courses Plus Student 4,638 Points

you need to group your divs using container divs to be able to control the flow of your elements

if its not too clear whe, go watch css basics, more specifically the part about the flex property, you give your container a display: flex; property and it makes it a breaze to control the flow of its child elements, which makes your website more responsive and fluid and looking sharp