Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

simon buysse
simon buysse
9,716 Points
Posted by 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,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 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
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,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 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
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
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
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.