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 Mitchell Tau
Mitchell Tau
288 Points

Overlay solid color boxes over larger solid color box with html code

I am trying to overlay simple solid color boxes on a larger solid color box with html/css, and am fumbling, need some basic help, anyone?

2 Answers

Steven Parker
Steven Parker
229,608 Points
Steven Parker
Steven Parker
229,608 Points

Here's some basic info:

The browser's normal function is to lay out elements so that they do not overlap. Deliberately causing overlap requires overriding that normal function. Two ways that this might be done are by using float or position properties. The latter provides a more accurate way of locating your elements by providing specific pixel offsets via some combination of top, bottom, left and right properties.

If you need more specific help, be sure to provide your code. And if this is for a class, a link to the course page you are working on.

Mitchell Tau
Mitchell Tau
288 Points

Thank you Steven. I have posted my html and css in this comment. in the <!-- Layered Boxes --> section, the two red rectangles are to rest centered on the "base" lt blue rectangle with a right, left and center margin of 30px each, and the three white squares nest on the right red rectangle float right stacked one above the other separated by 15px between each.

this is the html —

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">
    <title>Mitchell Tau - Exercise 1</title>
    <link href="css/styles.css" type="text/css" rel="stylesheet"/>

</head>

<body>

  <!-- Purple top spanned bar -->
    <div id="header"></div>

    <!-- Row 2-3 boxes -->
    <div id="column1top"></div>
    <div id="column2top"></div>
    <div id="column3top"></div>


    <!-- Layered Boxes -->
    <div id="base"></div>
    <div id="redleft"></div>
    <div id="redright"></div>
    <div id="whitestack1"></div>
    <div id="whitestack2"></div>
    <div id="whitestack3"></div>

    <!-- Row 4-3 boxes -->
    <div id="column1bottom"></div>
    <div id="column2bottom"></div>
    <div id="column3bottom"></div>

  <!-- Purple bottom spanned bar -->
    <div id="footer"></div>

</body>

</html>

This is my css —

body {background-color: #ffffff;}

#header  {width: 100%;
        background:#6c00b1;
        background-position: center;
        height:200px;}

#column1top  {height: 200px;
        width: 300px;
        float: left;
        margin-left: 10px;
        margin-top: 30px;
        background-color: blue;}

#column2top  {height: 200px;
        width: 300px;
        float: left;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 30px;
        background-color: teal;}

#column3top  {height: 200px;
        width: 300px;
        float: left;
        margin-right: 10px;
        margin-top: 30px;
        background-color: green;}

#base  {height: 555px;
        width: 600px;
        float: left;
        margin-left: 180px;
        margin-top: 30px;
        background-color: lightblue;}

#redleft  {height: 495px;
        width: 255px;
        float: left;
        margin-left: 210px;
        margin-top: 30px;
        background-color: red;}

#redright  {height: 495px;
        width: 255px;
        float: left;
        margin-left: 30px;
        margin-top: 30px;
        background-color: red;}

#whitestack1
        {height: 125px;
        width: 125px;
        float: left;
        margin-left: 610px;
        margin-top: 15px;
        background-color: gainsboro;}

#whitestack2
        {height: 125px;
        width: 125px;
        float: left;
        margin-left: 610px;
        margin-top: 15px;
        background-color: #ffffae;}

#whitestack3
        {height: 125px;
        width: 125px;
        float: left;
        margin-left: 610px;
        margin-top: 15px;
        background-color: gainsboro;}

#column1bottom  {height: 300px;
        width: 180px;
        float: left;
        margin-left: 180px;
        margin-top: 30px;
        background-color: darkgray;}

#column2bottom  {height: 300px;
        width: 180px;
        float: left;
        margin-left: 30px;
        margin-top: 30px;
        background-color: darkgray;}

#column3bottom  {height: 300px;
        width: 180px;
        float: left;
        margin-left: 30px;
        margin-top: 30px;
        background-color: darkgrey;}

#footer {width: 100%;
        height:50px;
        background:#6c00b1;
        background-position: center;
        margin-top: 1150px;}
Steven Parker
Steven Parker
229,608 Points
Steven Parker
Steven Parker
229,608 Points

So it looks like you've already been successful in layering the red boxes on the purple footer using floats.

Now you might try experimenting with absolute positioning as an alternative layering method. I think you might find it preferable because it gives you more control.