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 better understanding of the concept of what goes on. 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>

your footer goes up when you `float: right` on the `rightSide`.. is that the issue? — kukkuz, Sep 02 '16 at 05:08

score 0 · Answer 1 · answered Sep 02 '16 at 05:09

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>

score 0 · Answer 2 · answered Sep 02 '16 at 07:26

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>

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

2 Answers2

Linked