CODEWITHSUNDEEP
css
Joe
Joe

Reputation: 923

Why does this div obscure this button?

I want a div to float next to my input but instead it's floating over top of it, and I'm not sure why. It's as if the div is set to use absolute positioning. I think I'm probably just overlooking something silly, but what is it?

html:

<input type="file" id="files" name="file" />
<div id="progress_bar"><div class="percent">0%</div></div>​

css:

input { float: left;}

#progress_bar {
  margin: 10px 0;
  padding: 3px;
  border: 1px solid #000;
  font-size: 14px;
  //clear: both;
  opacity: 0;
  -moz-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  -webkit-transition: opacity 1s linear;
  }

#progress_bar.loading {
    opacity: 1.0;
  }

#progress_bar .percent {
    background-color: #99ccff;
    height: auto;
    width: 0;
  } ​

I have an example here: http://jsfiddle.net/sWrvU/ which is based on the read files demo on html5rocks http://www.html5rocks.com/en/tutorials/file/dndfiles/

Uncomment clear:both to see the demo actually work (i.e. you can press the button because there's not a div on top of it), but then obviously the div still isn't floated next to the input.

Upvotes: 2

Views: 299

Answers (2)

cjc343
cjc343

Reputation: 3765

Using display: block instead of opacity removes the transition, which I'm guessing you're trying to keep.

The Progress bar isn't "floating over top" so much as the input is floating underneath. If you float the progress bar as well, things should go a little better: http://jsfiddle.net/cjc343/sWrvU/24/

Upvotes: 1

Henrik Ammer
Henrik Ammer

Reputation: 1899

I changed it to use display instead of opacity since opacity means the element is still there even though it is transparent.

CSS

input {
    float: left;
}    
#progress_bar {
    margin: 10px 0;
    padding: 3px;
    border: 1px solid #000;
    font-size: 14px;
    display:none;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
  }
  #progress_bar.loading {
    display:block;
  }
  #progress_bar .percent {
    background-color: #99ccff;
    height: auto;
    width: 0;
  }​

Upvotes: 1

Related Questions