css Question posted in
Some basic documentation can be found here.

Css – A span left, a span right, and the rest underneath (now with snippet)

Without wrapping the two <span>s in their own span or <div> and without putting the Lorem ipsum... in its own, what CSS would make the Lorem ipsum... start BELOW and not BETWEEN the two pink <span>s?

.container {overflow:auto}
.left  {float:left; background-color:pink}
.right {float:right; background-color:pink}
<div class="container">
  <span class="left">LEFT</span>
  <span class="right">RIGHT</span>
  Lorem ipsum dolor sit amet, 
  consectetur adipiscing elit
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    A little misuse of table-cell, I guess, but this seems to work all by itself:

    .left {display: table-cell; width: 100%}
.right {display: table-cell}

  2. 0

    Does it have to be in the th tag? It would be easier with a div.

    UP: Fixed the code taking into account several th

    table {
  width: 100%;
}

th,
td {
  box-shadow: 0 0 1px black;
  min-height: 1em;
}

div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

th span {
  flex-basis: 50%;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}
    <table>
  <tr>
    <th>
      <div>
        <span class="left"> text to the left  </span>
        <span class="right"> text to the right </span> and then a lot of text below
      </div>
    </th>
    <th>
      <div>
        <span class="left"> text to the left  </span>
        <span class="right"> text to the right </span> and then a lot of text below
      </div>
    </th>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search