CSS inline/block issue

Question

I am having trouble with css inline/block when using a <span> tag. enter image description here

enter image description here

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> &nbsp; <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> &nbsp; <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> &nbsp; <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/

Michael · Accepted Answer · 2013-01-18 01:52:57Z

3

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.

edited Jan 18, 2013 at 1:52

Michael

4,42011 gold badges57 silver badges92 bronze badges

answered Jan 18, 2013 at 0:43

Martín Valdés de León

1,35611 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Martín Valdés de León Over a year ago

No problem. inlines don't float, thats why Pennywise doesn't like them.

kapa Over a year ago

@MartínValdésdeLeón In fact, inlines become block when they are floated, so when you float something, there is not much sense in setting display: inline or display: block anyways. In fact, you have display: inline in your fiddle, which works just fine :).

Michael Over a year ago

Thank you both for your input. I will be sure to remember that. So just to recap, by clearing just the left hand side, you can still float stuff to the right of it on the same line so to speak?

Martín Valdés de León Over a year ago

Yes, I know that float turns inlines into blocks and that the css was working without that change, but I think the result ends up being misleading so its better to remove that line. And Mike, you are correct. The clear property specifies that nothing can float on that side of the element, but still allows you to float stuff to the other side of the element (unless of course you clear: both).

Ayman Safadi · Accepted Answer · 2013-01-18 00:43:32Z

1

Here's how I propose you fix this: http://jsfiddle.net/Er73L/1/

Here's the diff compared to your original CSS: http://www.diffchecker.com/3tKbEnCe

li span.messageControls {
    position: absolute;
    right: 0;
    top: 1em;
}

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;
    position: relative;  // NEW LINE
}

answered Jan 18, 2013 at 0:43

Ayman Safadi

11.6k1 gold badge30 silver badges42 bronze badges

Comments

greener · Accepted Answer · 2013-01-18 00:46:48Z

1

Simple fix, just use clear:left instead of clear:both like this:

li p.subject {
    margin: 5px 0 5px 5px;
    font-size: 14px;
    color: #666;
    clear:left;
    font-weight: 700;
}

Fiddle

answered Jan 18, 2013 at 0:46

greener

5,06913 gold badges56 silver badges98 bronze badges

Comments

kapa · Accepted Answer · 2013-01-21 09:18:28Z

0

another option is to absolutely position the span elements,. just add this line to the bottom of your css and tweak it as needed...

.messageControls{width:100px;border:1px solid red;position:absolute;right:0;margin-top:20px;}

http://jsfiddle.net/nYCsx/1/

edited Jan 21, 2013 at 9:18

kapa

78.9k21 gold badges166 silver badges178 bronze badges

answered Jan 18, 2013 at 0:53

lukeocom

3,2533 gold badges20 silver badges30 bronze badges

4 Comments

kapa Over a year ago

They will all appear at the top right corner of the document.

kapa Over a year ago

Show us the test then. jsFiddle, pastebin, etc., that's how people do it here.

lukeocom Over a year ago

I havent used jsFiddle that much so hope this link works... jsfiddle.net/nYCsx/1 I used the code from the question, and only added the line I suggested..

kapa Over a year ago

OK, I get it now. position: relative on the container would have been easier, but I understand now why your solution works :).

Collectives™ on Stack Overflow

CSS inline/block issue

4 Answers 4

4 Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related