Strange CSS float issue

Question

I am designing a website and I am trying to have one header with two smaller headers floating next to it, one under each other. I tried doing it here, about halfway down where it says "About" and "what your saying."

The about section appears correct because the smaller width pushes the next line down. BUT, on the right I cant get the text "testimonials" to be under "client'. I figured simply floating everything to the left would work, but apparently not. I have tried a lot of css tricks but cant seem to figure it out.

Thanks for the help.

Answer 1

The height of the title div on the left is 53.9 px, which fully accomodates the two lines of 17.6 and 14.3 plus margins. However, the height of the title div on the right is only 53 px, which does not leave quite enough space. Manually set the height of that title div (i.e. in your html ) and the two lines should render on top of each other instead of side by side.

Answer 2

I think you will have to put "client" and "testimonials" into a separate <div> that is float: left. Put "client" and "testimonials" in DIVs that have no float and a display: block.

Answer 3

You could put the two span's into another div wrapper. Float the div left & then have the two spans display as blocks so they sit above each other... or did you need to keep the html identical?

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

The css:

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

Edit: actually as other posters have pointed out, you don't need the extra div anyway... My mistake.

Answer 4

Make the top span display block and remove the float left from both

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

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

Answer 5

Try adding this:

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