I am having trouble with css inline/block when using a <span>
tag.
As you can see from the images, when you hover over the third message the Delete/Reply controls pop up, I do not wish for them to push the content down. How can I accomplish this?
This is my css code:
ul.inbox {
width: 100%;
list-style-type: none;
}
.unread {
border: 1px solid #999 !important;
background: #eee url("new.png") no-repeat !important;
background-position: left center !important;
}
li span.hidden {
clear: both;
visibility: hidden;
}
li span.messageControls {
clear: both;
float: right;
display: inline;
}
li span.messageControls a {
padding: 5px 5px 0 0;
font-size: 12px;
color: #06c;
}
li.message {
background: #eee;
border: 1px solid #ddd;
list-style-type: none;
display: block;
margin: 0 0 10px;
padding-left: 30px;
background-position: left center;
}
li.message:hover {
}
li.message a {
text-decoration: none;
}
li {
overflow: hidden;
}
li span.from {
margin: 5px 0 5px 5px;
font-family:"Open Sans",sans-serif;
font-size: 14px;
color: #666;
float: left;
font-weight: 700;
}
li span.date {
margin: 5px 5px 5px 0;
font-size: 12px;
float: right;
color: #06c;
}
li p.subject {
margin: 5px 0 5px 5px;
font-size: 14px;
color: #666;
clear: both;
font-weight: 700;
}
li p.preview {
margin: 5px 0 5px 5px;
font-size: 12px;
color: #999;
}
And my 'inbox' code:
<ul class="inbox">
<li id="1001843" class="message " onmouseout="document.getElementById('1001843MC').className='hidden'" onmouseover="document.getElementById('1001843MC').className='messageControls'" onclick="ajaxMessage(1001843);">
<span class="from">Michael·Norris</span> <span class="date">Yesterday·21:18</span> <span id="1001843MC" class="hidden"><a href="compose.php?id=&to=">Reply</a> <a href="update.php?id=&action">Delete</a></span>
<p class="subject">gjhgjhg</p>
<p class="preview">jhgjhgjhg</p>
</li>
<li id="1001842" class="message " onmouseout="document.getElementById('1001842MC').className='hidden'" onmouseover="document.getElementById('1001842MC').className='messageControls'" onclick="ajaxMessage(1001842);">
<span class="from">Michael·Norris</span> <span class="date">Yesterday·21:18</span> <span id="1001842MC" class="hidden"><a href="compose.php?id=&to=">Reply</a> <a href="update.php?id=&action">Delete</a></span>
<p class="subject">gfhjgjfdhsgf</p>
<p class="preview">gj·hg</p>
</li>
<li id="1001841" class="message " onmouseout="document.getElementById('1001841MC').className='hidden'" onmouseover="document.getElementById('1001841MC').className='messageControls'" onclick="ajaxMessage(1001841);">
<span class="from">Michael·Norris</span> <span class="date">Yesterday·20:17</span> <span id="1001841MC" class="hidden"><a href="compose.php?id=&to=">Reply</a> <a href="update.php?id=&action">Delete</a></span>
<p class="subject">gjhgjhg</p>
<p class="preview">jhgjhgjhg</p>
</li>
</ul>
Fiddle here: http://jsfiddle.net/Er73L/
You need to set the clear
properties correctly to achieve the behavior you want, and not just use clear: both
blindly.
I did two changes to your CSS:
li span.messageControls {
clear: right; /* was clear: both; */
float: right;
display: block; /* was display: inline */
}
li p.subject {
margin: 5px 0 5px 5px;
font-size: 14px;
color: #666;
clear: left; /* was clear: both; */
font-weight: 700;
}
Here's a working example. I also recommend you read up on the documentation.