Floating not right in ie?
i want to do like the following format:
So this is what i did :
<style>
.toptitle{
font-size:14px;
}
.toprating{
background:yellow;
float:left;
font-size:12px;
}
.topcontainer{
border-bottom:1px #CCCCCC solid;
}
</style>
<div class="topcontainer">
<div class="toprating"&g开发者_开发知识库t;256</div>
<div class="toptitle">Lorem Ipsum...</div>
</div>
<br>
<div class="topcontainer">
<div class="toprating">256</div>
<div class="toptitle">Lorem Ipsum...</div>
</div>
Now, in firefox,chrome,safari, this works perfectly, but in IE the title goes about 30 px down.
Is there a mistake in the code, or is there any better code to do this?
In IE you'll need to float the title as well like this:
.toptitle{
font-size:14px;
float: left;
}
Alternatively, if the rating is a constant width, just give it space like this:
.toptitle{
font-size:14px;
margin-left: 40px;
}
.toprating{
background:yellow;
float:left;
font-size:12px;
width: 40px;
}
You need to float topTitle and clear.
<style>
.toptitle{
font-size:14px;
float: left;
}
.toprating{
background:yellow;
float:left;
font-size:12px;
}
.topcontainer{
border-bottom:1px #CCCCCC solid;
}
.clear {
clear: both;
}
</style>
<div class="topcontainer">
<div class="toprating">256</div>
<div class="toptitle">Lorem Ipsum...</div>
<div class="clear"/>
</div>
<br>
<div class="topcontainer">
<div class="toprating">256</div>
<div class="toptitle">Lorem Ipsum...</div>
<div class="clear"/>
</div>
精彩评论