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 Ryan Hellerud
Ryan Hellerud
3,635 Points

*Fundamental html/css box model Question*

Hello,

I'm trying to figure out how to create a div with a background color and then position smaller div boxes with different background colors inside that div. I would need the smaller boxes to be position and centered vertically so I would need them to be inline-block. Problem is, when I specify the background color, no color shows up. I'm thinking I might need to use a z-index, but not sure how. Something along these, lines:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    test1
    <div class="innerbox">
      test2

    </div>

  </div>
</body>
</html>

.container{

  background-color:grey;
  height: 50px;
  z-index: -1;
  display: inline-box;
}
.innerbox{
  display:inline-box;
  width:10%
    background-color:blue;
  height:50px;
  z-index:1;
}
highlandcow
highlandcow
7,352 Points

You forgot to end the width declaration in the innerbox class with a semi-colon. This is why the blue background isn't working.

Ryan Hellerud
Ryan Hellerud
3,635 Points

thanks but how could I add more boxes like the inner box inside the main box. When I add more with the same .innnerbox properties, its shows up outside the main container.

Gabriel D. Celery
Gabriel D. Celery
13,810 Points

Not to mention the html document doesn't point to any css document. As for the question there are many ways to solve the problem.

I recommend finishing the html and css courses in the "Front End Development" and "Web Design" tracks.

P.S. They show up outside because you set up a height for the ".container" div. So they "overflow".

Ryan Hellerud
Ryan Hellerud
3,635 Points

http://jsbin.com/nuyiji/edit?html,css,output

just trying to get the divs inside the container

5 Answers

highlandcow
highlandcow
7,352 Points
highlandcow
highlandcow
7,352 Points

Is this closer to what you had in mind...?

<!DOCTYPE html>
<html>
<style>
.container{
    background-color:grey;
}
.innerbox{
    display: block;
    height: 20px;
    width: 200px;
    background-color:blue;
    color: #FFF;
}
</style>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="innerbox">box1</div>
    <div class="innerbox">box1</div>
    <div class="innerbox">box1</div>
  </div>
</body>
</html>

BTW - This may be of use to you: quirksmode.org/css/css2/display.html

I've found this article to be very helpful understanding the display property.

Here's another great article on positioning: http://learnlayout.com/position.html

Ryan Hellerud
Ryan Hellerud
3,635 Points

http://imgur.com/yM8Z1xr

basically trying to recreate the above. Thanks for the link, need a another one though.

Hammad Ahmed
seal-mask
.a{fill-rule:evenodd;}techdegree
Hammad Ahmed
Full Stack JavaScript Techdegree Student 11,910 Points
Hammad Ahmed
.a{fill-rule:evenodd;}techdegree
Hammad Ahmed
Full Stack JavaScript Techdegree Student 11,910 Points

To show different colors on different boxes, you can use HTML classes like

// colors.css
.blue {
    background-color: blue;
}
.red {
    background-color: red;
}
.yellow {
    background-color: yellow;
}
.green {
    background-color: green;
}
.black {
    background-color: black;
}
.tomato {
    background-color: tomato;
}

// Apply this class to have a lighter shade.
.light{
    opacity: .5;
}

And the HTML

// index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div class="container"> test1 <div class="light green"> test2 </div>

<div class="blue">
  test2
</div>

<div class="light tomato">
  test2
</div>

</div> </body> </html>

Ryan Hellerud
Ryan Hellerud
3,635 Points

I am trying to align the boxes inside the container div. That would be helpful if you include how to do that. The background color is not the issue.

Hammad Ahmed
.a{fill-rule:evenodd;}techdegree
Hammad Ahmed
Full Stack JavaScript Techdegree Student 11,910 Points

Do you want to center align them?

Ryan Hellerud
Ryan Hellerud
3,635 Points
Ryan Hellerud
Ryan Hellerud
3,635 Points

I just want to be able to have control of the position of them. For now I want them to be sizable inside the container div and show up in the right spot. If you could work on this it would be appreciated.

Hammad Ahmed
seal-mask
.a{fill-rule:evenodd;}techdegree
Hammad Ahmed
Full Stack JavaScript Techdegree Student 11,910 Points
Hammad Ahmed
.a{fill-rule:evenodd;}techdegree
Hammad Ahmed
Full Stack JavaScript Techdegree Student 11,910 Points

Hope this helps.

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

<div class="light green" id="left">
  test2
</div>

<div class="blue" id="center">
  test2
</div>

<div class="light tomato" id="right">
  test2
</div>```
Ryan Hellerud
Ryan Hellerud
3,635 Points

my question is more how to position boxes inside of other boxes, and change the position and size properties. Maybe there is a tutorial on this specific aspect?

Hammad Ahmed
.a{fill-rule:evenodd;}techdegree
Hammad Ahmed
Full Stack JavaScript Techdegree Student 11,910 Points

You can simply float them in the parent boxes. There is a CSS Layout course by Guil. Or if you can, use a framework like Bootstrap.

Hammad Ahmed
seal-mask
.a{fill-rule:evenodd;}techdegree
Hammad Ahmed
Full Stack JavaScript Techdegree Student 11,910 Points
Hammad Ahmed
.a{fill-rule:evenodd;}techdegree
Hammad Ahmed
Full Stack JavaScript Techdegree Student 11,910 Points

I've coded it according to your given image. I think this is what you need.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layout</title>
</head>
<body>
    <style>
    .container {
        border: 1px solid black;
        display: inline-block;
        margin: 0px;
        text-align: center;
    }

    .numbers {
        margin: 10px;
        margin-left: 40px;
        vertical-align: middle;
    }

    .one, .two, .three {
        float: right;
    }
    </style>

    <div class="container">


             Red


        <div class="grey container">
            Grey

                <div class="numbers container">

                    <div class="one container">
                         1
                    </div>

                    <div class="two container">
                         2
                    </div>

                    <div class="three container">
                         3
                    </div>

                </div>
        </div>

    </div>

</body>
</html>