When I float the div to the right the screen messes up…I've tried clear and some other options

Question

I\'m having an issue in general when it comes to floats. I\'ll be doing fine with the layout but once I start floating the whole page does weird stuff. I think I need a bett

Answer 1

Floating elements create a new block formatting context and so it must be cleared before your footer if you expect it to come below the preceeding contents.

If I guess right, you need to float: left your leftSide div.

I placed your clear: right div above the footer and made it clear: both.

Snippet below:

* {
  margin: 0;
}
#heading {
  background-color: black;
  height: 150px;
}
#navigation {
  background-color: green;
  height: 30px;
}
#leftSide {
  background-color: blue;
  width: 400px;
  height: 700px;
  float: left;
}
#rightSide {
  background-color: red;
  width: 400px;
  height: 700px;
  float: right;
}
#footer {
  background-color: black;
}

  

    
Heading
    
Navigation
    
Left Side
    
Right Side
    

    
Footer