Mirakurun Mirakurun - 2 months ago 13
CSS Question

Text under floated span

I am trying to align text in a box. Second text under the fist one. This is what I have so far:

*-----------------------------------------------------------------*
| *------* Floated text |
| | | |
| | | this text should be under floated text ... |
| *------* |
*-----------------------------------------------------------------*


If I don't float the upper text (name), I can't use a margin on it. If I float it, my bottom text (thread) moves to the right like on the drawing.

<div>
<span class='name' id='name'>$name</span>
<br>
<span class='overflow-ellipsis' id='thread'>$thread</span>
</div>


.name {
float: left;
margin-top:8px;
font-weight: 700;
}

.overflow-ellipsis {
clear:both;
padding-top: 12px;
width:550px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
position: absolute;
}


The outer box is:

.box {
top-margin:8px!important;
width: 720px;
min-height: 64px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
border: 1px solid #e6e6e6;
overflow:hidden !important;
text-overflow: ellipsis!important;
position: relative;
}


I want to have the second text under the first one with top margins on the first one 8px.

The box on the left side:

<div class='thumbnail'></div>
.thumbnail {
margin-top:8px!important;
margin-left:8px!important;
margin-right:8px!important;
border-radius: 8px;
float: left;
width: 48px;
height: 48px;
border: 1px solid black;
margin: 0 auto;
}


JSFIDDLE

Answer

Remove unnecessary float and position: absolute from styles of .name and overflow-ellipsis classes respectively. Working demo with minor other fixes is in below snippet.

@charset "utf-8";

html {
  background: grey;
}

body {
  text-align: center;
  margin: 0px;
  padding: 0px;
}

.header {
  max-width: 720px;
  min-height: 64px;
  line-height: 64px;
  font-family: "Roboto";
  font-weight: bold;
  text-align: center;
  background: #e6e6e6;
  margin: 0;
  border: 1px solid #e6e6e6;
}

#wrap {
  height: 100vh;
  background: white;
  max-width:721px;
  margin:auto;
  text-align: left;
}
.clearfix:after {
  clear:both;
  content:".";
  display:block;
  height:0;
  line-height:0;
  visibility:hidden;
}
.name {
  margin-top:8px;
  font-weight: 700;
}

.overflow-ellipsis {
  padding-top: 8px;
  max-width: 550px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.box {
  margin-top:8px !important;
  max-width: 720px;
  min-height: 64px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  border: 1px solid #e6e6e6;
  overflow:hidden !important;
  text-overflow: ellipsis!important;
  position: relative;
}
.thumbnail {
  margin-top:8px!important;
  margin-left:8px!important;
  margin-right:8px!important;
  border-radius: 8px;
  float: left;
  width: 48px;
  height: 48px;
  border: 1px solid black;
  margin: 0 auto; 
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

<div id="wrap" >
  <div class="header">Closenger web</div>

  <div id='post' class='box'>
    <div class='thumbnail'></div>
    <div class='name' id='name'>name</div>
    <div class='overflow-ellipsis' id='thread'>thread</div> 
  </div>

</div>