Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

simon buysse
simon buysse
9,716 Points

float gets pushed down

Hi, I'm trying to make a 3 column division. The left float (column) aligns perfectly, but somehow my right float gets pushed down. It's so simple, but can't figure out what goes wrong.

<div class="lb_controls">
  <div class="lb_previous"></div>
  <div class="lb_title">sample</div>
  <div class="lb_next"></div>
</div>
.lb_controls {
    width: 25%;
    background: rgba(0, 0, 0, 0.75);
    height: 30px;
    line-height: 30px;
}


.lb_title{
    text-align: center;
    margin: 0 50px;
    font-size: 1em;
}

.lb_previous, .lb_next{
    width: 30px;
  height: 30px;
  background-color:green;
}
.lb_previous{
    float: left;
}
.lb_next{
    float: right;
}

6 Answers

Sean T. Unwin
Sean T. Unwin
28,685 Points

Simon,

I have made 3 addtions to your Codepen. Here is the fork.

You can also see the changes I made, with comments, below.

Feel free to ask any further questions you may have. :)

.lb_controls {
  width: 25%;
  /* Added min-width to try to prevent breakage on narrow screen width */
  min-width: 125px;
  background: rgba(0, 0, 0, 0.75);
  height: 30px;
  line-height: 30px;
}

.lb_title{
  /* Added width so text will center
   *    - needs some context in order to center
   * Using calc()
   *    - 100% container width subtract total button widths (30px * 2)
   */
  width: calc(100% - 60px);
  text-align: center;
  margin: 0 auto;
  font-size: 1em;
}

.lb_previous, .lb_next{
  width: 30px;
  height: 30px;
  background-color:green;
}

/* Included .lb_title to be floated left */
.lb_previous,
.lb_title {
    float: left;
}
.lb_next{
    float: right;
}
Zoltán Holik
Zoltán Holik
3,401 Points
.lb_title{
    text-align: center;
    margin: 0 50px;
    font-size: 1em;
    float:left;
}

And if you want to .lb_title fill the available space between the prev and the next use this:

.lb_title{
    text-align: center;
    width: 87.39823%;           // for older browsers like IE8
    width:calc(100% - 60px);
    font-size: 1em;
    float:left;
}
Sean T. Unwin
Sean T. Unwin
28,685 Points

Set .lb_title to float: left will fix it.

/* Change /*
.lb_previous {
    float: left;
}
/* To the following /*
.lb_previous,
.lb_title {
    float: left;
}
simon buysse
simon buysse
9,716 Points

Juan Aviles , why is it that defining 2x30px will break at screenwidth of 847 px? The way I see it you only need a bit more than 60px to fit all the elements in the container. Could you explain this reasoning a bit further please

As for the fixes: I want to let .lb_title fill the available space between the prev and the next

  1. Changing the margin of .lb_title to 0 auto, doesn't do it.
  2. also Zoltán Holiks solution doesn't do the trick for me.
  3. by letting .lb_title float left, all 3 elements fit in the container, but the lb_title doesn't center anymore...

Here's a codepen to make it more clear what's happening : http://codepen.io/anon/pen/KpVxZM

simon buysse
simon buysse
9,716 Points

Thanks a lot, your code makes a lot of sense, it works and helps me a lot.

Any idea why my code didn't work? I guess the .lb_title element was too wide to fit all 3 elements in the container, but still it doesn't make sense to me because the right element (.lb_next) was floating right. So it shouldn't care about how big .lb_title is and just float over that right margin. Or am I misunderstanding how floats work? (Because it seems like the left float was floating just fine over the left margin of .lb_title)

Juan Aviles
Juan Aviles
12,795 Points

You are defining the widths of .lb_previous and .lb_next with exact units (30px each), so eventually at 847px screen width and below the .lb_next div breaks...there is just not enough room. If you absolutely need the 30px width for the side divs, you can give the .lb_title div a margin of "0 auto". This will split the left and right margins evenly, but you will still run out of room eventually as the screen narrows.

I'm not sure what your end goal is, but you are trying to stuff 10 pounds of groceries into a 5 pound bag.