Strange CSS float issue

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.

+3
source share
5 answers

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

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

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

+3

:

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

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... .

+1

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.

0
source

Source: https://habr.com/ru/post/1731296/


All Articles