1

Say you have a Div (id="toolbar"), and inside that toolbar you have a Div (id="ButtonHolder") that contains 2 buttons. If you float the #ButtonHolder to the right and don't set an explicit width on it, is that kosher?

I've read on stack overflow that you should always set a width on a floated element. The buttons text might change, from save to apply, and I don't want to have to adjust #ButtonHolder's width every time.

I thought about setting #ButtonHolder's width to auto, but the browser does that by default so it seems unnecessary to set it's width to auto. I'm worried the browser might not always float #ButtonHolder the way I think it should.

Albzi
  • 15,431
  • 6
  • 46
  • 63
JasonTheLucky
  • 177
  • 11
  • Can you give the link to that source answer? – Halcyon May 16 '14 at 15:55
  • "I've read on stack overflow that you should always set a width on a floated element" - This is simply not true. – Axel May 16 '14 at 15:59
  • you could use a floatting container with a fixed width and text-align your button in it. so width of container remains the same and no jumpy effect.It is same as fixing width to button to avoid jumpy effect on switching them. – G-Cyrillus May 16 '14 at 15:59
  • @Axel maybe that was a very old answer when IE6 was still bugging around :) – G-Cyrillus May 16 '14 at 16:00
  • You can assign the div to display inline-block, so it will take up only the width its content requires, rather than the default block using all the space available. If the div contains block displayed elements they will need to be addressed, but inline content uses the minimum needed. – kennebec May 16 '14 at 16:55

2 Answers2

0

A change from "save" to "apply" isn't going to take up much more room, to be honest.

In principle, yes you should always set a width - if you don't, then say you have the button float:left; and another <div> float:right;. If you don't set widths, they're not going to take up the full screen width, so any elements you put in below are going to try to position themselves in the gap between the two.

It is also a good idea to have a 100% width container element for this particular scenario to prevent the described effects.

ArtOfCode
  • 5,702
  • 5
  • 37
  • 56
0

float and position usually come with a cost. You should try to first find other ways to position elements within your layout. You can should consider other options such as margin, padding, display: inline-block;, text-align ... etc.

I would recommend reading this.

To answer your question directly. Setting width for floats is not written on stone but not doing so, usually means trouble later. At least in my personal point of view.

Ramy Nasr
  • 2,367
  • 20
  • 24