0

Why doesn't #right stay on the same line than the float: left div #left? whereas when not setting a width for #right the behaviour is normal (see 2nd code snippet below).

* { margin:0; padding: 0; }
#left {background-color: green; float: left; width: 200px; }
#right {background-color: blue; width: 200px; }
<div id="menu">
     <div id="left">Left</div> 
     <div id="right">Right</div>
</div>

The strange thing is, when I don't put any width for #right, then it works. Why does adding a width setting for #right make everything change?

* { margin:0; padding: 0; }
#left {background-color: green; float: left; width: 200px; }
#right {background-color: blue; }
<div id="menu">
     <div id="left">Left</div> 
     <div id="right">Right</div>
</div>

Note: the question is really here : why does setting a width change wrapping / not wrapping? The answer to this is not obvious in this related question.

Community
  • 1
  • 1
Basj
  • 41,386
  • 99
  • 383
  • 673
  • Using display: inline-block; on #right will fix this, but for your question, why does "width: *px" drops the block down and using "width: auto;" doesn't, I don't know. I guess someone will explain it as an answer. Probably when the block has a fixed width, it doesn't take in consideration thet there is an element with float next to it, but width: auto; does. – MajeStic May 14 '16 at 08:50
  • You have to use float:right and clear:both. Removing width from right makes it to appear on the whole div even behind of left a. see https://jsfiddle.net/anzzxrcw/ Div is block element so it take 100% width. – Leo the lion May 14 '16 at 08:53
  • @Leothelion But *why* do they stay on same line without a width setting? Why does setting a width make the div wrap to next line? – Basj May 14 '16 at 08:54
  • Possible duplicate of [How does the CSS Block Formatting Context work?](http://stackoverflow.com/questions/6196725/how-does-the-css-block-formatting-context-work) – Asons May 14 '16 at 09:18
  • @LGSon : The answers in this mentionned question are rather a *long comprehensive general course* about Block Formatting Content, whereas this question is a simple example in a particular case. I wouln't say it's a duplicate. – Basj May 14 '16 at 10:10
  • Me neither, hence it says _Possible duplicate ..._, still, BFC is likely the answer why your sample does work. As soon as I find/ran into an exact description (target your case) I will add it. – Asons May 14 '16 at 10:17

2 Answers2

2

Add margin-left: 200px; to your non floated div and it will behave

* { margin:0; padding: 0; }
#left {background-color: green; float: left; width: 200px;  }
#right {margin-left: 200px;background-color: blue;}
<div id="menu">
     <div id="left">Left</div> 
     <div id="right">Right</div>
</div>

Update

When using floats, one can trigger a block formatting context (BFC), which makes elements behave in a specific way when used with floats.

Here are some links describing that

Community
  • 1
  • 1
Asons
  • 84,923
  • 12
  • 110
  • 165
  • See my second code snippet in question, it also works with same layout than yours without margin-left. My question is more : why does setting a `width` for #right make the div wrap to next line? (i.e. compare my 2 code snippets) – Basj May 14 '16 at 08:57
  • @Basj You are very right, it is not obvious in the related question, still, it is the answer to your question. BFC is somewhat difficult to understand why it behaves in the way it does, hence all my posted links, where hopefully one is understandable for some and another for others. – Asons May 16 '16 at 06:39
0

<div>'s are block style elements, so even though you floated one to the left, the other is still a block and will render on its own line.

To make them render on the same line, either set the display to inline-block or float the second one too:

* { margin:0; padding: 0; }
#left {background-color: green; float: left; width: 200px;  }
#right {background-color: blue; width: 200px; float: left}
<div id="menu">
     <div id="left">Left</div> 
     <div id="right">Right</div>
</div>
Liftoff
  • 24,717
  • 13
  • 66
  • 119
  • Thanks! But when I don't set width for #right, #right *is still* a div (thus block), and the same behaviour should apply. But (see my second code snippet), the behaviour is very different without width : they stay on the same line. Why? – Basj May 14 '16 at 08:53