Push Elements Left or Right with the float (removing elements from the normal flow?)

HTML-CSS
1

Tell us what’s happening:
Hey, if float does remove element from the normal flow, why is there that when we float id=left element to the left, existing element to the bottom(id=“right”-one) wouldn’t go up, as if there wasn’t the id=left - element.
I was expecting that removing from the normal flow would mean that remaining elements would occupy the place which floated element freed up. So I deleted the id=“left” to check it and it gave different effect than float.

 I don't know If i missed something but would appreciate if just somebody explains me that

Your code so far


<head>
  <style>
  #left {
    float:left;
    width: 50%;
  }
  #right {
    
    width: 40%;
  }
  aside, section {
    padding: 2px;
    background-color: #ccc;
  }
  </style>
</head>
<body>
  <header>
    <h1>Welcome!</h1>
  </header>
  <section id="left">
    <h2>Content</h2>
    <p>Good stuff</p>
  </section>
  <aside id="right">
    <h2>Sidebar</h2>
    <p>Links</p>
  </aside>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property

2

why u use float?try flaexbox

3

Its about understanding, I’m not using either yet, just interested…

4

The lesson says ’ Floating elements are removed from the normal flow’. So, they’re still part of the flow but are no longer following the normal flow.

I’d recommend reading this. Key takeaway:

Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning. Absolutely positioned page elements are removed from the flow of the webpage

1 Like
5

in these days avoid float if you can, after use float you need use pseudo elements after and before to clear float

1 Like