CODEWITHSUNDEEP
htmlcss
user2105735
user2105735

Reputation: 55

How to use z-index with floats?

All, pretty silly question here, I'm sure I'm just having a long day, but what am I doing wrong? I simply want to float my right (somewhat larger) div over my left div. See my code below: 

<style>
body{margin: 0; padding: 0;}
#wrapper {width: 1010px; margin: 0 auto; height: 100%;}
#header_txt {width: 434px; height: 162px; margin: 40px auto;}
#content {position: relative;}
#left {width: 488px; height: 1081px; float: left; background: url(images/img-left.jpg); z-   index: 3; position: relative;}
#right {width: 688px; height: 1081px; float: right; z-index: 2; position: relative;}
</style>

</head>


<body>
<div id="wrapper">
    <div id="header">
        <img src="images/img-header.jpg">
    </div>
    <div id="header_txt">
        <img src="images/img-txt.jpg">
    </div>
    <div id="content">
        <div id="left"></div>
        <div id="right">
            <p>text goes here..</p>
        </div>
    </div>
</div>
</body>


</html>

Upvotes: 0

Views: 847

Answers (3)

Tomi
Tomi

Reputation: 1

You're using wrong the css properties, try:

#right {
  width: 688px;
  height: 1081px;
  position: absolute;
  background-color: #000;
  display: inline-block;
  right: 0;
  z-index: 2;
}

#left {
  width: 488px;
  height: 1081px;
  background: url(images/img-left.jpg);
  position: absolute;
  background-color: #FF8181;
  display: inline-block;
  left: 0;
  z-index: 1;
}

Upvotes: 0

jos
jos

Reputation: 48

If you just want your right div over your left div then you don't really need to float them. If you use position:absolute on both of them and then set the z-index higher on the one you want on top it will accomplish the same thing. Here's an example:

body { margin: 0; padding: 0; }
#wrapper { width: 1010px; margin: 0 auto; height: 100%; }
#header_txt { width: 434px; height: 162px; margin: 40px auto; }
#content { position: relative; }
#left { width: 488px; height: 1081px; position:absolute; background: url(images/img-left.jpg); z-index: 2; }
#right { width: 688px; height: 1081px; position:absolute; z-index: 3; }

Also note that z-index cannot have any spaces. If you use z- index it won't work.

Upvotes: 0

Will
Will

Reputation: 4155

z-indexing doesn't work the way you think (I think :). Floats are going to occupy horizontal and vertical space - you can't pick up an edge of one of them with z-index. You'll need to use position: absolute; on one of them.

http://jsfiddle.net/YE8Lv/1/ is an example.

Upvotes: 1

Related Questions