All geek questions in one place

When I float in the div on the right, the screen is gaining momentum ... I tried clearly and some other options

I have a problem at all when it comes to floats. I will be fine with the layout, but as soon as I start swimming, the whole page will be weird. I think I need to better understand the concept of what is happening. Here is my code for html and 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>
Run codeHide result
-2
source share
2 answers

Use display:inline-block;for your idleftSide

#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 is 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>
Run codeHide result
0
source
Items

Floatcreate a new one block formatting context, so before << 23> it should be cleared if you expect it to be below the previous content.

, float: left leftSide div.

clear: right div clear: both.

:

* {
  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;
}
<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 style="clear: both;"></div>
    <div id="footer">Footer</div>
  </div>
</body>
Hide result
0

Source: https://habr.com/ru/post/1660911/

More articles:


All Articles