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

-

i'm having issue in general when comes floats. i'll doing fine layout once start floating whole page weird stuff. think need better understanding of concept of goes on. here code html , css.

* {  	margin: 0;  }  #heading {  	background-color: black;  	height: 150px;  }  #navigation {  	background-color: green;  	height: 30px;  }  #leftside {  	background-color: blue;  	width: 400px;  	height: 700px;  }  #rightside {  	background-color: red;  	width: 400px;  	height: 700px;  	float: right;  }  #footer {  	background-color: black;  }
<body>  	<div id="wrapper">  	<div id="heading">heading</div>  	<div id="navigation">navigation</div>  	<div id="leftside">left side</div>  	<div id="rightside">right side</div>  	<div id="footer">footer</div>  	<div style="clear: right;"></div>  	</div>  </body>

use display:inline-block; 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;  }
<!doctype html>  <html>  <head>  	<title>this it</title>  	<link rel="stylesheet" type="text/css" href="style.css">  </head>  <body>  	<div id="wrapper">  	<div id="heading">heading</div>  	<div id="navigation">navigation</div>  	<div id="leftside">left side</div>  	<div id="rightside">right side</div>  	<div id="footer">footer</div>  	<div style="clear: right;"></div>  	</div>  </body>  </html>


Comments

Post a Comment