CSS: Multiline float alignment not working as desired

Question

I have multiple lines im my html document, each of which is floating to the left. But my second line is not properly aligned to the left -- rather hard to explain, better just check out code and jsfiddle:

https://jsfiddle.net/0j8kd4c3/

<html>

<head>

    <style>

        label, input[type=text], button {
            float: left;
        }

    </style>

</head>

<body>

    <label for="input1">LABEL 1</label>
    <input id="input1" type="text" />
    <button type="button">BUTTON</button>

    <br />

    <label for="input2">LABEL 2</label>
    <input id="input2" type="text" />

    <br />

    <label for="input3">LABEL 3</label>
    <input id="input3" type="text" />

</body>

</html>

Wrapping up line one in a div container doesn't help, so what can I do?

Note that it's again working for line 3, which confuses me.

score 1 · Accepted Answer · answered Sep 01 '19 at 01:55

If float is only solution you are looking for, then you must be aware of clear property of CSS. https://www.w3schools.com/cssref/pr_class_clear.asp

Simply, apply clear:both on new row's div.

Here is complete solution:

<html>

<head>

 <style>
 
  label, input[type=text], button {
   float: left;
  }
        .next{
          clear: both;
        }
 
 </style>

</head>

<body>
 <label for="input">LABEL 1</label>
 <input id="input" type="text" />
 <button type="button">BUTTON</button>
  
 <div class="next"></div>
 <label for="anotherInput">LABEL 2</label>
</body>

</html>

score 0 · Answer 2 · answered Aug 31 '19 at 21:38

0

Though, You shouldn't use float to layout your structures. That's a BAD practice.

Basically, as per my experience, float can have significant side-effects, that can directly affect your webpage.

Better, explained here: https://stackoverflow.com/a/9777248/7847496

To simplify your answer, you have to wrap your each row inside <div>...</div> tag. But with float property, parent 's height become zero.

Here a simple solution (with display:inline-block), that will work for you:

<html>

<head>

 <style>
  label, input[type=text], button {
   display: inline-block;
  }
 
 </style>

</head>

<body>
  <div>
    <label for="input">LABEL 1</label>
    <input id="input" type="text" />
    <button type="button">BUTTON</button>
  </div>
  <div>
   <label for="anotherInput">LABEL 2</label>
  </div>
</body>

</html>

answered Aug 31 '19 at 21:38

Pulkit Aggarwal

623
7
6

Thanks; but then I got spaces between the element, which I wanted to avoid (thus using `float`) – DonFuchs Aug 31 '19 at 22:54
To remove spaces between `inline-block` elements, there is another fix. `float` isn't preferable approach for that. – Pulkit Aggarwal Sep 01 '19 at 01:44
Refer to these tricks, if you wish to remove spaces between: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ – Pulkit Aggarwal Sep 01 '19 at 01:47

score 0 · Answer 3 · answered Aug 31 '19 at 22:18

It's good that you are using float for the lebel but remember it's working with the line height and the line the for lebel and text input is not same. You will understand when you use another 'br' in your code.

<body>
  <label for="input">LABEL 1</label>
  <input id="input" type="text" />
  <button type="button">BUTTON</button>

  <br><br>

  <label for="anotherInput">LABEL 2</label>
</body>

Instead of use float, you can use 'display:inline-block'

  label, input[type=text], button {
    display: inline-block;
  }

score 0 · Answer 4 · answered Sep 01 '19 at 03:09

You can use in this way:

for example:

<html>

<head>

 <style>
 
  label, input[type=text], button {
   float: left;
  }
 
 </style>

</head>

<body>
 <div>
  
    <label for="input">LABEL 1</label>
 <input id="input" type="text" />
 <button type="button">BUTTON</button>
  </div>
 
 <br />
  <br />
 
 <div>
  
    <label for="anotherInput">LABEL 2</label>
  </div>
</body>

</html>

CSS: Multiline float alignment not working as desired

4 Answers4