I'm trying to set up a basic article header for a blog template, but IE can't handle a floating element correctly.
I have this pretty standard code:
<div id="column">
<p class="post-info">By Post Author <span class="right">August 23, 2009</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Styled with this CSS:
#column {
margin: 0 auto;
width: 350px;
text-align: left;
}
.post-info {
padding: .4em 0;
margin-bottom: 1em;
font-size: .9em;
color: #666666;
border-bottom: 1px solid #cecece;
}
.post-info .right {
float: right;
}
In Firefox, Chrome, Opera, and everything else on the planet, this appears correctly:
In IE 6 and above, though (and probably below, too), the floated date appears below its containing paragraph and sometimes eliminates the bottom border:
What do I need to do to make IE float the date correctly?
Thanks!
3 answers
points
You can try two things:
Reverse the order and have the date appear first in the code:
<p class="post-info"><span class="right">August 23, 2009</span> By Post Author</p>
Or set absolute and relative positioning on the elements of the P
.post-info {
padding: .4em 0;
margin-bottom: 1em;
font-size: .9em;
color: #666666;
border-bottom: 1px solid #cecece;
position:relative;
}
.post-info .right {
position:absolute;
right:0;
}
First option takes you out semantically speaking, while the second is just a change in the CSS. Note that there isn't a need to float:right the element after having set it by position:absolute.
points
If you make the first p tag inline it should stop pusing the date down in IE, it's because the p is a block-level tag and naturally assumes 100% width of its container. But why IE handles this so differently to every other browser is anyones guess ;)
- So is IE actually doing it right since <p> is a block element? Or is the floated span really supposed to go on top of the 100% <p>? Not that I really trust IE's implementation of standards, but that might make sense...
points
You can also set your <p class="post-info"> to clear:right; float:left; I believe
If you choose this you will have to set your column div to overflow:auto;
Any questions, feel free to ask me on twitter: @kivodesigns
- This would mess up the whole thing, since the span is inside the <p>. It would appear as a small rectangle left to the text.
