Question

Here’s an issue that’s been bugging me all day. I’m not exactly sure how to describe it other than I’m having an issue with a div floating over a floated container and it seems to be only an issue in Chrome.

Take a look at this: http://jsfiddle.net/H8vVf/ . There should be a stripe next to text but in Chrome, it looks like a strike-through.

HTML:

<div class="wrapper">
    <div class="content">SOME GOOD TEXT</div>
    <div class="stripe"></div>
</div>

CSS:

.wrapper::after {
     content: " ";
     display: block;
}
.content {
     float: left;
}
.stripe {
     background-color: black;
     width: 100%;
     display: inline;
     position: absolute;
     height: 1em;
}​

I’ve figured out a workaround for it but I was just wondering if anyone can explain to me what is going wrong here and why. If not, I’ll just go on my merry way…

Answer 1

Quote OP:

I’m having an issue with a div floating over a floated container…

Normally, when you float: something, the other content on the page should flow around it.

Quote OP:

There should be a stripe next to text but in Chrome, it looks like a
strike-through.

I’m not sure what you mean by “strike-through”, but you’ve defined the element with class .stripe to be 100% wide which means it will be 100% the width of its parent. In this case, the parent of .stripe is the element with class .wrapper. Since the .wrapper class has no defined width, by default, it will be 100% as wide as its parent which is the window. Therefore, as you’ve defined it, the stripe will be 100% as wide as the window.

Quote OP:

I was just wondering if anyone can explain to me what is going wrong here and why.

Regarding your code…

.stripe {
     background-color: black;
     width: 100%;
     display: inline;
     position: absolute;
     height: 1em;
}​

display: inline is a property for elements within the content flow.

However, position: absolute takes the element out of the content flow.

It makes no sense this way. In other words, it can’t both be in the flow and out of the flow at the same time.

Here is the W3C spec which explains the CSS2 Visual Formatting Model as well as a detailed comparison of normal flow, floats and absolute positioning.