3

I have two span elements. I want them to sit side-by-side and contain some text. Is this possible? If so what am I doing wrong?


.added-box{
 background-color:#06C;
 padding:8px;
 margin:8px;
}

.edited-box{
 background-color:#093;
 padding:8px;
 margin:8px;

}

And the page code is:

<p align="right">
   <span class="edited-box">sfds<span>
   <span class="added-box">sfds<span>
</p>

Edit: What I am hoping to get is a box, somewhat like the one on this page which has my name, time I asked the question and my points. I don't mind how I get it, but css is preferred, it looks like StackOverflow is using a table. Is this the only way to do this?

2 Answers 2

8

You have two typos in your HTML where you are failing to close the <span> tags with </span>. It should be:

<p align="right">
  <span class="edited-box">sfds</span>
  <span class="added-box">sfds</span>
</p>

This typo is causing your edited-box class to wrap everything and therefore the CSS is breaking.

0
-4

Use &nbsp; for space between spans.

3
  • 1
    Isn't that a bit inelegant ... not saying I am right ... just asking.
    – Ankur
    Commented Sep 20, 2010 at 10:05
  • The other problem is that it seems the first span contains the second - based on the coloring ... I tried &nbsp it doesn't stop this problem, so there is some green on the right hand side of the blue.
    – Ankur
    Commented Sep 20, 2010 at 10:06
  • 3
    Non-breaking space should not be used for creating horizontal space. Non-breaking space should be used as a white space character in places where a line break might be confusing, e.g. within a number 1&nbsp;000&nbsp;000 dollars.
    – nikc.org
    Commented Sep 20, 2010 at 10:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.