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

后端未结

关注

 2  534

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

相关标签:

2条回答

别那么骄傲

2020-12-22 14:23

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;
}

<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>

0 讨论(0)

盖世英雄少女心

2020-12-22 14:41

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;
}

<!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>

0 讨论(0)