CODEWITHSUNDEEP
javascripthtmlcss
nikhil123
nikhil123

Reputation: 48

Unexpected behavior of Floating elements with uneven height

I want to float elements "left" which have uneven heights

<html>
<head>
  <style>
    span {
      float: left;
      width: 50%;
      text-align: center;
    }
  </style>
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div>
    <span>I am long text so i may take long space vbjkhkj hkjhjkhjkh jkghkjgk gjhfgjhykf yjf kfgkuyrfkyfkrf ytgk tygy kry kr ykut kutuktuy ruykt kutkuyykut yufkytrky utkt r tykutg kyuyuktykytr ktykuyt,ytktytg kyutukyrtyryrrryryu ryuryuryryu ryuryurtyukrerrukrkr r67rtr87</span>
    <span>Hello2</span>
    <span>Hello3</span>
    <span>Hello4</span>
    <span>Hello5</span>
</body>
</html>

I wanted "Hello3" on the left side below the long text, but it comes after the large text,

and i want "Hello4" on the right side and "Hello5" on the left side,

sorry for bad English

thanks.

Upvotes: 0

Views: 237

Answers (3)

Nick Parsons
Nick Parsons

Reputation: 50914

You could create two separate classes, one which will float your element to the left, and another which will float your element to the right:

<html>

<head>
  <style>
    span {
      width: 50%;
      text-align: center;
    }
    
    .float-left {
      float: left;
      clear: left;
    }
    
    .float-right {
      float: right;
    }
  </style>
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div>
    <span class="float-left">I am long text so i may take long space vbjkhkj hkjhjkhjkh jkghkjgk gjhfgjhykf yjf kfgkuyrfkyfkrf ytgk tygy kry kr ykut kutuktuy ruykt kutkuyykut yufkytrky utkt r tykutg kyuyuktykytr ktykuyt,ytktytg kyutukyrtyryrrryryu ryuryuryryu ryuryurtyukrerrukrkr r67rtr87</span>
    <span class="float-right">Hello2</span>
    <span class="float-left">Hello3</span>
    <span class="float-right">Hello4</span>
    <span class="float-left">Hello5</span>
  </div>
</body>
</html>

Alternatively, if you're always going to be alternating float sides, you can use the nth-child selector and remove the classes:

<html>

<head>
  <style>
    span {
      width: 50%;
      text-align: center;
    }
    
    .container span:nth-child(odd) {
      float: left;
      clear: left;
    }
    
    .container  span:nth-child(even) {
      float: right;
    }
  </style>
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div class="container">
    <span>I am long text so i may take long space vbjkhkj hkjhjkhjkh jkghkjgk gjhfgjhykf yjf kfgkuyrfkyfkrf ytgk tygy kry kr ykut kutuktuy ruykt kutkuyykut yufkytrky utkt r tykutg kyuyuktykytr ktykuyt,ytktytg kyutukyrtyryrrryryu ryuryuryryu ryuryurtyukrerrukrkr r67rtr87</span>
    <span>Hello2</span>
    <span>Hello3</span>
    <span>Hello4</span>
    <span>Hello5</span>
  </div>
</body>
</html>

EDIT: If you are after a grid-like system, you can use flex, and create rows/columns within your HTML:

<html>

<head>
  <style>
    span {
      width: 50%;
      text-align: center;
    }
    
    .row {
      display: flex;
      justify-content: space-between;
    }
    
    .row span {
      flex: 1;
    }
  </style>
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div class="container">
      <div class="row">
        <span>I am long text so i may take long space vbjkhkj hkjhjkhjkh jkghkjgk gjhfgjhykf yjf kfgkuyrfkyfkrf ytgk tygy kry kr ykut kutuktuy ruykt kutkuyykut yufkytrky utkt r tykutg kyuyuktykytr ktykuyt,ytktytg kyutukyrtyryrrryryu ryuryuryryu ryuryurtyukrerrukrkr r67rtr87</span>
        <span>Hello2</span>
      </div>
      
      <div class="row">
        <span>Hello3</span>
        <span>Hello4</span>
      </div>
      <div class="row">
        <span>Hello5</span>
        <span></span>
      </div>
    </div>
</body>

</html>

Upvotes: 3

Nartub
Nartub

Reputation: 3898

I can only recommend that you use the flexbox model. A "float left float right" situation can be achieved with

<div style="display: flex; justify-content: space-between;">
  <div>
    This content will stick to the left
  </div>
  <div>
    This content will stick to the right
  </div>
</div>

Working fiddle using the Tailwind CSS library

Upvotes: 1

Lars
Lars

Reputation: 395

If you doesn't need float: left explicitly you could use CSS Grid.

The two columns will be using the free space so they have a width of 50%. More information for grid-template-columns on MDN.

<html><head>
<style>
div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
span {
  text-align: center;
}

</style>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div>
  <span>
    I am long text so i may take long space vbjkhkj hkjhjkhjkh jkghkjgk gjhfgjhykf yjf kfgkuyrfkyfkrf ytgk tygy kry kr ykut kutuktuy ruykt kutkuyykut yufkytrky utkt r tykutg kyuyuktykytr ktykuyt,ytktytg kyutukyrtyryrrryryu ryuryuryryu ryuryurtyukrerrukrkr r67rtr87 
  </span>
  <span>
    Hello2
  </span>
  <span>
    Hello3
  </span>
</div>
</body>
</html>

Upvotes: 1

Related Questions