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.

Pekka · Accepted Answer · 2010-02-04 00:07:57Z

3

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.

answered Feb 4, 2010 at 0:07

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BalusC Over a year ago

+1 you were faster. As to the "why" it kinda works on About section, it's because the span.bottom was too wide so that it just jumps to the next line. He indeed actually want two block elements below each other there. Just replacing float:left; by display:block; for both spans (or replacing span by div) has been sufficient.

Pekka Over a year ago

Good point, but this will lead to problems if the top element becomes taller (the bottom element might fall underneath the left floated one).

JCHASE11 Over a year ago

this is true, but the top element won't ever get taller. Thanks though

Nick Craver · Accepted Answer · 2010-02-04 00:11:47Z

2

Try adding this:

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

answered Feb 4, 2010 at 0:11

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Comments

Emily · Accepted Answer · 2010-02-04 00:11:02Z

1

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;
}

answered Feb 4, 2010 at 0:11

Emily

10.1k4 gold badges34 silver badges39 bronze badges

Comments

Alconja · Accepted Answer · 2010-02-04 00:18:11Z

1

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.

edited Feb 4, 2010 at 0:18

answered Feb 4, 2010 at 0:08

Alconja

14.9k3 gold badges62 silver badges61 bronze badges

1 Comment

JCHASE11 Over a year ago

Nope i can change the html, I will give it a shot

Stephen Hudson · Accepted Answer · 2010-02-04 00:07:48Z

0

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.

answered Feb 4, 2010 at 0:07

Stephen Hudson

361 bronze badge

Collectives™ on Stack Overflow

Strange CSS float issue

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related