CODEWITHSUNDEEP
cssz-index
Magearlik
Magearlik

Reputation: 523

Floating div over other divs not working with z-index

Ok I am trying to build a website design. What I need to do is have two colored background divs and then float a white box in front of them. I have used z-index 0 for the background blocks and then z-index 5 for the block I want to float on top. I have also used position: relative. Does anyone know why this doesn't work. Here is my code:

HTML:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <div id="page">
        <div id="grey_block_left"></div>
        <div id="purple_block_right"></div> 
        <div id="white_box_outer">
            float on top
        </div>
        <div id="footer">

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

CSS:

@charset "utf-8";
*
{
    list-style: none;
    text-decoration:none;
    padding: 0;
    margin: 0;
}
html
{
    margin: 0 auto;
    width: 100%;
    min-width: 320px;
}
body 
{
    margin: 0;
    padding: 0;
}
#page
{
    width: 100%;
    position: relative;
    z-index: 0;
}
#grey_block_left
{
    width: 40%;
    background-color: #333333;
    min-height: 700px;
    float: left;
    position: relative;
    z-index: 0;
}
#purple_block_right
{
    width: 60%;
    background-color: #9966cc;
    min-height: 700px;
    float: left;
    position: relative;
    z-index: 0;
}
#footer
{
    width: 100%;
    background-color: #111111;
    min-height: 250px;
    float: left;
    position: relative;
    z-index: 0;
}
#white_box_outer
{
    width: 70%;
    min-height: 450px;
    margin-left: 200px;
    position: relative;
    z-index: 5;
    float: left;
    background-color: #ccc; 
}

Upvotes: 0

Views: 1656

Answers (1)

frnt
frnt

Reputation: 8795

#white_box_outer
{
width: 70%;
min-height: 450px;
margin-left: 200px;
position: absolute;
float: left;
background-color: #ccc;
}

Set your white_box position to absolute and then adjust it's height and width, according to your goals.

Upvotes: 1

Related Questions