CODEWITHSUNDEEP
htmlcssalignmentcss-float
DonFuchs
DonFuchs

Reputation: 133

CSS: Multiline float alignment not working as desired

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.

Upvotes: 1

Views: 829

Answers (4)

Tanbir Ahmod
Tanbir Ahmod

Reputation: 503

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>

Upvotes: 0

Pulkit Aggarwal
Pulkit Aggarwal

Reputation: 643

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>

Upvotes: 1

Sayedur Rahman
Sayedur Rahman

Reputation: 171

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;
  }

Upvotes: 0

Pulkit Aggarwal
Pulkit Aggarwal

Reputation: 643

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>

Upvotes: 0

Related Questions