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

Use display:inline-block; for your id leftSide

#heading {
	background-color: black;
	height: 150px;
}
#navigation {
	background-color: green;
	height: 30px;
}
#leftSide {
	background-color: blue;
	width: 50%;
	height: 700px;
  display:inline-block;
}
#rightSide {
	background-color: red;
	width: 50%;
	height: 700px;
	float: right;
}
#footer {
	background-color: black;
}

	
	


	

	
Heading
	
Navigation
	
Left Side
	
Right Side
	
Footer