HTML/CSS float: left; is not working properly

First, it might be the issue that you are adding margin and paddings, which add size to the box even though the box has a width of 420px, you have to calculate margins and paddings to, or use * { box-sizing: border-box; }, which will calculate the width of that element as a sum of all the sizes (padding, margin, width) and not exceed the width.

Second, the order of the elements are important when floating, put main always on top of the sidebar, since elements start as top to bottom, when you float a top element, the bottom element if its wider, will collapse and align with the main box.

Screenshot for reference:

Related Posts:

  1. Making a
  2. multiple classes on single element html
  3. How to insert spaces/tabs in text using HTML/CSS
  4. How to get these two divs side-by-side?
  5. Make div scrollable
  6. How to make the HTML link activated by clicking on the
  7. ?
  8. How to change text transparency in HTML/CSS?
  9. right align an image using CSS HTML
  10. How to completely remove borders from HTML table
  11. How do I right align div elements?
  12. Why “Inline-block” doesn’t work properly in this CSS?
  13. How to fix a footer overlapping content?
  14. How would you make two
  15. What’s the HTML to have a horizontal space between two objects?
  16. height style property doesn’t work in div elements
  17. CSS “margin: 0 auto” not centering
  18. how to center an inline div using css?
  19. How can I insert vertical blank space into an html document?
  20. How to have an anim gif on a link and play it on hover and reset
  21. Align
  22. Align text to the bottom of a div
  23. How to make a

Leave a Comment