Strange CSS float issue

Question

I am designing a website and I am trying to create one heading with two smaller headings floating next to it, one below each other. I tried to do it here , about halfway down where it says “Oh” and “what are you saying”.

The about line looks right because the smaller width pushes the next line down. BUT, on the right, I can’t get the text “reviews” under “customer”. I decided that just swimming everything on the left would work, but apparently not. I tried a lot of css tricks but didn't seem to understand it.

Thanks for the help.

Answer 1

span.top {
  color:white;
  display:block;
  font-size:16px;
  margin-bottom:2px;
}

span.bottom {
  color:#28DDFF;
  font-size:13px;
}

Answer 2

, "" "" <div>, float: left. "" "" DIV, float display: block.

Answer 3

:

.top { display: block; float: none; }
.bottom{ float: none; }

Answer 4

div. div , , , ... html ?

html:

<div class="title">
    <div class="border_topright"></div>
    <h2>What You're Saying</h2>
    <div class="title_left" >
        <span class="top">Client</span>
        <span class="bottom">Testimonials</span>
    </div>
    <div class="border_bottomright"></div>
</div>

css:

.title_left { float: left; }
.title_left span.top, .title_left span.bottom { display: block; /*remove the float*/ }

: , , div... .

Answer 5

The height of the div header on the left is 53.9 px, which fully accommodates two lines of 17.6 and 14.3 plus margins. However, the height of the div header on the right is only 53 pixels, which does not leave enough space. Manually set the height of this div heading (i.e. In your html) and the two lines should be displayed on top of each other and not side by side.