CODEWITHSUNDEEP
htmlcsspositioning
BueKoW
BueKoW

Reputation: 966

Need parent <div /> to cover PART of a child <div /> using CSS

I am trying to produce a progress bar with a divider bar that separates sections. This divider bar (child <div/>) hangs below the progress bar (parent <div/>). Thus, I want the progress bar to cover all of the divider bar except for the part that hangs below.

Here is a very simplified representation:

<html>
  <head>
    <style>

      body {
        width:500px;
        margin:0 auto;
        }
      #parent {
        width:50%;
        height:30px;
        background-color: yellow;
        }
      #child {
        width:1px;
        height:50px;
        background-color:black;
        float:right;
        margin-right:100px;
        }

    </style>
  </head>
  <body>

    <div id="parent">
      <div id="child"></div>
    </div>

  </body>
</html>

How can I get the yellow part of the progress bar to cover up the intersecting portion of the divider bar?

Here is an image representing what I'm looking for:

divider hangs below bar and is covered where they intersect by the bar/parent

Thanks in advance!

Upvotes: 0

Views: 680

Answers (4)

Chords
Chords

Reputation: 6850

Setting a parent to position: relative will allow you to absolutely position the marker. Since they'd both then be appropriate types for z-index, I would take that route. Here's a jsfiddle:

http://jsfiddle.net/WXDZF/

Seems to be the cleanest solution. In this case you really are trying to position something, not push something up or down, so I would recommend staying away from using a margin in an inorganic way.

Upvotes: 1

Dominic Green
Dominic Green

Reputation: 10258

You could just set your overlay on another container

#parent {
    width:50%;
    height:30px;

    }
  .innerParent{
     background-color: yellow;
        width:100%;
        position:absolute;
         top:0;
        left:0;
         display:block;
         height:30px;
    }
  #child {
    width:1px;
    height:50px;
    background-color:black;
    float:right;
    margin-right:100px;
    z-index:1;

    }

markup

  <div id="parent">
<div class="innerParent">
</div>
  <div id="child"></div>
</div>

Upvotes: 1

Ezeke
Ezeke

Reputation: 939

dunno if i get this right, but why dont you just give the child element a margin-top? (and reduce the height of the child div)

http://jsfiddle.net/7SMuJ/

if that is not an option you'd need to rearrange the elements so you could use z-index

Upvotes: 2

Spikey21
Spikey21

Reputation: 439

You have to switch the paramaters from child to parent and visa versa, see below.

  #parent {
    width:100px;
    height:30px;
    background-color: yellow;
    }
  #child {
    width:50%;
    height:30px;
    background-color:black;
    float:right;
    }

Upvotes: 0

Related Questions