CSS Float:clear is not working with relative position

Question

Float:clear is not working with an element with relative position around it.

I have tried putting the float element in a div, changing display type of parent element. It does not work the expected way.

I am trying to avoid the overlap of child 2 element with Element 2.

My research failed to show the right way to make the above two work together.

Any guidance is appreciated.

Below is the screenshot of sample reference

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 90%;
  //height: 550px;
  margin: auto;
  background-color: lightgrey;
  margin-top: 15px;
  border-radius: 15px;
}
.mainheader {
  width: 100%;
  height: 125px;
  border-radius: 15px;
  background-color: black;
}
.menu {
  height: 30px;
  background-color: seagreen;
  position: relative;
  top: 95px;
}
.main {
  float: left;
  padding: 10px;
  width: 70%;
  background-color: lightyellow;
  //display: none;

}
.main img {
  display: inline-block;
  float: left;
  margin: 12px;
  width: 100px;
  border-radius: 15px;
}
aside {
  float: left;
  /*width: 30%;
    height: 40px;*/
  background-color: lightyellow;
  //display: none;
  width: 30%;
  text-align: center;
  //outline: 1px blue solid;
  //padding-bottom: 30px;
  position: relative;
  top: 30px;
}
.sidebar {
  //outline: 1px gold solid;
  //height: 350px;

  /*position: relative;
  top: 30px;*/
}
.cdiv article {
  padding: 10px;
}
.content1 {
  //border-radius: 15px;
  //border: 1px red solid;

}
.content2 {
  width: auto;
  background-color: pink;
  //border-radius: 15px;
  //border: 1px red solid;

}
body .container .body aside .cdiv {
  height: 100px;
  width: 90%;
  //margin-bottom: 10px;
  background-color: yellow;
  //border-radius: 10px;
  display: inline-block;
}
footer {
  clear: both;
  width: 100%;
  height: 40px;
  background-color: red;
}

<!DOCTYPE html>
<html>
<title>MyHome</title>
<link rel="stylesheet" type="text/css" href="style.compact.css">

<body>
  <div class="container">
    <div class="mainheader">
      <div class="header"></div>
      <div class="menu"></div>
    </div>
    <div class="body">
      <div class="main">
        <div class="cdiv content1">
          <img src="placeholder.jpg" alt="My logo">
          <article>
            <h2>My Site</h2>
            <p>This is a test paragraph. This was supposed to be a long paragraph let see how this turns out. I have tried making as long as possible. But who is gonna type so much.</p>
            <br>
            <p>this is was test of new line lets find out how it works</p>
            <br>
            <p>This is a test paragraph. This was supposed to be a long paragraph let see how this turns out. I have tried making as long as possible. But who is gonna type so much.</p>
          </article>
        </div>
        <div class="cdiv content2">
          <article>
            <h3>My Site</h3>
            <p>This is a test paragraph. This was supposed to be a long paragraph let see how this turns out. I have tried making as long as possible. But who is gonna type so much.</p>
            <br>
            <p>this is was test of new line lets find out how it works</p>
            <br>
            <p>This is a test paragraph. This was supposed to be a long paragraph let see how this turns out. I have tried making as long as possible. But who is gonna type so much.</p>
          </article>
        </div>
      </div>
      <aside>
        <div class="sidebar">
          <div class="cdiv content3">
            <div class="title"></div>
            <div class="text"></div>
          </div>
          <div class="cdiv content4">
            <div class="title"></div>
            <div class="text"></div>
          </div>
          <div class="cdiv content5">
            <div class="title"></div>
            <div class="text"></div>
          </div>
          <div class="cdiv content6">
            <div class="title"></div>
            <div class="text"></div>
          </div>
        </div>
      </aside>
    </div>
    <footer></footer>
  </div>
</body>

</html>

why do you need `top: 30px` - this causes `child2` to go down when you add `position: relative`... — kukkuz, Dec 24 '16 at 04:57
it is supposed to be a sidebar; I will be adding child div to it, default position is too high up to my preference. — Taha Sk, Dec 24 '16 at 05:02
so what is the issue you are facing? I don't see any issue here... — kukkuz, Dec 24 '16 at 05:04
my bad, I want the float element to start below the child 2. — Taha Sk, Dec 24 '16 at 05:08
ok, so that's why I said initially that when you add `position:relative` the `top` property shifts the element from its original position.. that is why you have overlapping here... — kukkuz, Dec 24 '16 at 05:17
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/131391/discussion-between-taha-sk-and-kukkuz). — Taha Sk, Dec 24 '16 at 05:20
as @kukkuz said, you don't need position and top css in your code. — Leo the lion, Dec 24 '16 at 07:46
hi @Leothelion if you take a look at https://s28.postimg.org/tuub5rz0d/mysite.png8 there is a overlap how do I move side bar down without overlapping. — Taha Sk, Dec 24 '16 at 08:17
you want that grey box on top and also want that red footer should shift in bottom so yellow part wont overflow on it..right? — Leo the lion, Dec 24 '16 at 08:19
@leothelion Yes, the grey box at the top is just container div background. I needed to take the sidebar little down. But it overlaps on the footer by the value of position-top. the footer moves down on increasing the height of child div in sidebar but with the overlap equal to position-top value. so basically, how can I take the sidebar down by few pixels and ensure the footer also moves down accordingly without overlap. — Taha Sk, Dec 24 '16 at 08:34
@TahaSk when i copied whole code in local file at my machine..then there is no issue at all..and if we are using postion:relative then shouldn't we use position:absolute on parent? also use clear both after div so you can see element in inspect element. — Leo the lion, Dec 24 '16 at 10:29
@Leothelion if you take a look at https://s28.postimg.org/tuub5rz0d/mysite.png8 there is a overlap how do I move side bar down without overlapping. — Taha Sk, Dec 24 '16 at 12:16

score 0 · Accepted Answer · answered Dec 30 '16 at 05:37

0

If you are using position relatvie then use margin not top. So you can change this css and it will be working fine. aside { margin-top:30px; /NOT top:30px;/ }

answered Dec 30 '16 at 05:37

Patrick R

6,621
1
24
27

Thanks Patrick, that works. I feel like why I did not think of it, it's basic. In my defense I am still learning. Thanks a lot. – Taha Sk Dec 30 '16 at 09:11

CSS Float:clear is not working with relative position

1 Answers1