CSS span wrap with padding

Question

I've got a pretty annoying problem. I have to make a "table" fwhich containes 3 elements next to each other. The first 2 elements are simple divs, floated left, but the third is a little bit complicated. It must have padding on each sides. By the way, it's a text which can be wrapped by the end of the line. My problem is that when this element breaks at the end of the first line and the beginning of the second line do not have padding attributes.

I've made a simple example page here.

Do you have any solutions for me? I've tried so many different ways... When the space next to the third element is empty, it's OK, but when I prepend the boxes its completely broken.

Solution 1

Do you need the width to be dynamic or can it be fixed in size? I would remove the spans, float div.inner and hardcode its width. Something like this:

.container {
   overflow: hidden;
}

.inner {
   float: left;
   padding: 7px;
   width: 106px; /* you could use percentages to fix the widths if you'd like to keep things dynamic. */
}

You could just adjust the padding and avoid setting the border all together. Setting overflow to hidden on the container will force the container element to fit all of the floated elements inside of it. This allows you to avoid inserting a div to clear the floated elements.

You could also express this as a nested list as it's best to avoid unnecessary divs:

<ol id="examples_list">
  <li>
    <ul class="container">
      <li class="box">...</li>
      <li class="box">...</li>
      <li class="inner">...</li>
    </ul>
  </li>
</ol>

with...

#examples_list, #examples_list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

To style it in a similar fashion.

Solution 2

Ok, based on @b_benjamin response to a comment above, I think I might have one possible solution but I also think it will rely on some CSS that might not play well in older browsers, but it's a simple concept that can probably be adjusted with other tricks.

This seems to work in the latest FF, Chrome and IE9.

First, the HTML:

<div style="width:340px;">
    <!-- a list of text, with some time's marked up -->
    <ul class="sched">
        <li><b>17:55</b><b>18:10</b> <a href="#">Lorem ipsum dolor</a> sit posuere.</li>
        <li><b>18:20</b><b>18:30</b> <a href="#">Lorem ipsum dolor</a> sit amet orci aliquam.</li>
        <li><b>18:20</b><b>18:30</b> <a href="#">Class aptent</a> taciti sociosqu ad sed ad.</li>
        <li><b>19:05</b><b>19:17</b> <a href="#">Mauris et urna et</a> ante suscipit ultrices sed.</li>
        <li><b>19:05</b><b>19:17</b> <a href="#">Proin vulputate pharetra tempus.</a> Quisque euismod tortor eget sapien blandit ac vehicula metus metus.</li>
    </ul>
</div>

Now some CSS: (I used a simple color theme based on b_benjamin's sample photo)

/* reset default list styles */
.sched, .sched li{
    list-style:none; 
    font-size:14px; 
    padding:0;
    margin:0; 
}
.sched li{
    position:relative; 
    padding:0 10px;

    margin:10px 0; 
    background:#631015; 
    color:#FFF; 
}
.sched b{
    position:relative; 
    left:-10px; 
    display:inline-block;

    padding:2px 10px; 
    font-weight:none; 
    background:#FFF; 
    color:#666; 

}
/* some light styling for effect */
body{ 
    background:#cc222c; 
} 
.sched li a{ 
    color:#FF9; 
}

Explanation:

The box model requires a certain thought process on how to achieve padding on inline elements (text). One thing you can do is simply put padding around the entire containing box.

In my concept, I used a UL list and each LI element is the container. I used a 10px padding on the container.

.sched li{
    padding:0 10px;
}

This will give us our padding, but it will cause our "time" elements to also have this padding. My "trick" is to "fix" this by using a negative relative position equal to the padding:

.sched b{
    display:inline-block; /* make these items act like block level elements */
    position:relative; /* give the b elements a relative position*/
    left:-10px; /* offset them equal to the padding */
}

There's one last thing to do and that's to make sure the parent element is also position:relative so the child element will use it's containing dimensions:

.sched li{
    position:relative; /* needed for B elements to be offset properly */
    padding:0 10px;
}

Here's a snip of what it looks like on Chrome.

You can, of course, play around with padding. There's probably also some solutions to make the "B" elements float, but this seemed to work well.

I hope that helps!