CODEWITHSUNDEEP
htmlcss
Tatjana Hasart
Tatjana Hasart

Reputation: 13

Can't place aside tag to left top, have tried float: left / top:0, left:0 and other options still nothing

I have a problem with the positioning of tag in CSS. No matter what I try it remains below the main part and won't go on top (I need top right corner). Can't figure out where is the problem. Help, please.

Here is the problem part and my CSS code 

    .aside {
      position: relative;
      float: right;
      margin: 14px 14px 14px 0px;
      padding-left: 15px;
      clear: left;
      width: 220px;
      background-color: #EAA845;
    }

    .sectionaside {
      padding: 10px;
      margin: 15px 15px 15px 5px;
      background-color: #DF5252;
    }
<aside class="aside">

          <section class="sectionaside">
            <h4><u>Liked the article?! Stay tuned and find more interesting insights!</u></h4>
          
          </section>

          <section class="sectionaside">
            <h4>Related web sites</h4>
         
          </section>

          <section class="sectionaside">
            <h4>A &quot;must have&quot; skills in 21st century</h4>
            

          </section>

        </aside>


        <footer><u>Contact information</u></footer>

Upvotes: 1

Views: 1038

Answers (3)

Johannes
Johannes

Reputation: 67814

If you want asideto be above everything else, just add clear: both; to whatever element comes after it - in your particular case the footer, but in real life probably something else.

And if you really want it in the upper right corder, erase the margin setting for it and add margin: 0; to html and body:

html,
body {
  margin: 0;
}

.aside {
  position: relative;
  float: right;
  padding-left: 15px;
  clear: left;
  width: 220px;
  background-color: #EAA845;
}

.sectionaside {
  padding: 10px;
  margin: 15px 15px 15px 5px;
  background-color: #DF5252;
}

footer {
  clear: both;
}
<aside class="aside">

  <section class="sectionaside">
    <h4><u>Liked the article?! Stay tuned and find more interesting insights!</u></h4>

  </section>

  <section class="sectionaside">
    <h4>Related web sites</h4>

  </section>

  <section class="sectionaside">
    <h4>A &quot;must have&quot; skills in 21st century</h4>


  </section>

</aside>


<footer><u>Contact information</u></footer>

Upvotes: 0

Nate Getch
Nate Getch

Reputation: 1489

On your css, you are floating right under .aside, That needs to be changed to float: left; And its good practice to make clearfix after you finish floating elements. Check out the attached snippet with the changes on your code. Hope it helps.

.aside {
  position: relative;
  float: left;
  margin: 14px 14px 14px 0px;
  padding-left: 15px;
  clear: left;
  width: 220px;
  background-color: #EAA845;
}

.sectionaside {
  padding: 10px;
  margin: 15px 15px 15px 5px;
  background-color: #DF5252;
}
.clearfix{
  clear:both;
}
    <aside class="aside">

      <section class="sectionaside">
        <h4><u>Liked the article?! Stay tuned and find more interesting insights!</u></h4>

      </section>

      <section class="sectionaside">
        <h4>Related web sites</h4>

      </section>

      <section class="sectionaside">
        <h4>A &quot;must have&quot; skills in 21st century</h4>


      </section>

    </aside>
    
    <div class="clearfix"></div>

    <footer><u>Contact information</u></footer>

Upvotes: 1

Marcin Szwarc
Marcin Szwarc

Reputation: 581

Try using position: absolute (if it should be placed relative to <body>) or position: fixed (sticks to window) on tag with the top or left properties

Upvotes: 1

Related Questions